Easy overlay for background-image

by asemahle

HTML

<p>Example of a big image being scaled down</p>
<div class="img border" style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/e/ed/Palais_Garnier.jpg)"></div>
<br>
<p>Example of a small image being scaled up</p>
<div class="img border" style="background-image: url(https://en.wikipedia.org/static/images/project-logos/enwiki.png)"></div>

CSS

.border {
  border: dashed black 1px;  
}

.img {
  width: 200px;
  height: 200px;
	background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}