CODEWITHSUNDEEP
htmlcssoverlay
V.S
V.S

Reputation: 527

Content after CSS overlay is below the overlay

I'm learning some basic css and am trying to make an overlay without having to set the height on the overlay div. (I want the overlay to cover just the background image in the .bg-img class)

But the problem is that the content after the overlay is behind the overlay. https://jsfiddle.net/vxbu07z9/10/

Can someone point out what I'm missing?

html:

.bg-img {
  background-image: url('https://placeimg.com/600/600?t=3');
  background-attachment: fixed;
  background-size: cover;
  position: relative;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.6);
}

.content {
  color: #fff;
}
<div class="bg-img">
  <div class="overlay"></div>
  <div class="content">
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, labore!</div>
    <ul>
      <li>List Item 1</li>
      <li>List Item 1</li>
      <li>List Item 1</li>
      <li>List Item 1</li>
    </ul>
  </div>
</div>

Upvotes: 0

Views: 1416

Answers (1)

Paulie_D
Paulie_D

Reputation: 115046

It's just a stacking order issue.

You can fix it by adding position:relative to the .content div

to reset the order 

.bg-img {
  background-image: url('https://placeimg.com/600/600?t=3');
  background-attachment: fixed;
  background-size: cover;
  position: relative;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.6);
}

.content {
  color: #fff;
  position: relative;
}
<div class="bg-img">
  <div class="overlay">

  </div>
  <div class="content">
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, labore!</div>
    <ul>
      <li>List Item 1</li>
      <li>List Item 1</li>
      <li>List Item 1</li>
      <li>List Item 1</li>
    </ul>
  </div>

or more simply..

Change the z-index of the overlay

.bg-img {
  background-image: url('https://placeimg.com/600/600?t=3');
  background-attachment: fixed;
  background-size: cover;
  position: relative;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: -1;
}

.content {
  color: #fff;
}
<div class="bg-img">
  <div class="overlay"></div>
  <div class="content">
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, labore!</div>
    <ul>
      <li>List Item 1</li>
      <li>List Item 1</li>
      <li>List Item 1</li>
      <li>List Item 1</li>
    </ul>
  </div>
</div>

Upvotes: 4

Related Questions