CSS Background-Image

Displaying an image using CSS background instead of <img> element.

by jwpg018241

HTML

<div class="block">
  <div class="circle"></div>
</div>
<ul>
  <li>
    <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#Background_Properties" target="_blank">Background Properties</a>
  </li>
  <li>
    <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background" target="_blank">CSS Background</a>
  </li>
</ul>


<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

CSS

.block {
  /* background: transparent url("http://www.gstatic.com/webp/gallery/4.png") center center no-repeat; */
  background-color: transparent;
  background-image: url("//www.gstatic.com/webp/gallery/4.png");
  background-position: center center;
  background-repeat: no-repeat;
  width: 200px;
  height: 100vh;
  position: relative;
}

.circle {
  background-color: tomato;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  position: absolute;
  top: 10px;
  right: 10px;
}