Kevin Powell - Community•2y ago

Background image

Hi all there was video where @Kevin had background image without css background image but rather div that is paced on background. Don't know if my explanation is good but hopefully someone can point me the video or how to do this.

1 Reply

MarkBoots•2y ago

There are multiple ways, for example, you can position the background behind the container

<div class="container">
  <!-- this will be placed behind the container -->
  <img class="background" src="your-image.jpg" alt=""> 

  <!-- the rest of the content, just as usual -->
  <h1>Hello World</h1>
  <p>Here is some text<p>
</div>

<div class="container">
  <!-- this will be placed behind the container -->
  <img class="background" src="your-image.jpg" alt=""> 

  <!-- the rest of the content, just as usual -->
  <h1>Hello World</h1>
  <p>Here is some text<p>
</div>

.container { 
  position: relative;
}
.container> img.background {
  position: absolute; 
  /*size and position relative to container */
  width: 100%; 
  height: 100%;
  top: 0; 
  left: 0;
  z-index: -1; /* put image behind the container */
  object-fit: cover; /* so the image fills the available space */
}

.container { 
  position: relative;
}
.container> img.background {
  position: absolute; 
  /*size and position relative to container */
  width: 100%; 
  height: 100%;
  top: 0; 
  left: 0;
  z-index: -1; /* put image behind the container */
  object-fit: cover; /* so the image fills the available space */
}

here the working example https://codepen.io/MarkBoots/pen/NWBaJWO

Gaming

Programming

Background image