Overlay for section background photo

Hello.

My section looks like this:

<section class="quotes">
  <div class="container">
    <h2 class="section-title">Recommended</h2>
    <div class="quotes-wrapper">
      <article class="quote">
        <blockquote>
          <q>I like the things around me to be beautiful and slightly dreamy, with a feeling of worldliness.</q>
          <footer>Alice Temperley</footer>
        </blockquote>
      </article>
    </div>
  </div>
</section>

CSS for section:

.quotes {
  background-image: url('https://i.postimg.cc/LXsGqXT8/pexels-kaboompics-com-6663.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}

Till there it works well. But I want to add overlay on this background image. So that text is displayed above overlay.

I tried with this but it doesnt work (it gives overlay but on header, not on section + it covers text while it should be under):

.quotes:before {
  position: absolute;
  display: block;
  content: '';
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  opacity: 0.6;
}

What am I doing wrong?

Hi @cosmicpanda

[off-topic]
When you post code in the forum, you need to format it. To do so you can either select all the code and click the </> button, or type 3 backticks ``` on a separate line both before and after the code block.

I have done it for you this time.
[/off-topic]

It works for me on Firefox and Chrome on Windows 10.

Hi there cosmicpanda,

and a warm welcome to these forums. :winky:

Forget all this…

.quotes:before {
  position: absolute;
  display: block;
  content: '';
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  opacity: 0.6;
}

…and use this…

.container {  
	background-color: rgba( 255, 255, 255, 0.6 );
 }

coothead

2 Likes

thanks, normally it would work

but container is used also for other sections and has already styling which i want to keep. i want add this overlay to quotes section only.

and even if i create a new div class to replace container and use your code, overlay doesnt cover all background image because section (which also is used multiple times) has padding

what now?

Hi there cosmicpanda,

I can only supply solutions to the code that you supply.

If there are other considerations to take into account
then supply the appropriate code or failing that post a
link to the page.

coothead

Try set the stack level on the pseudo element to below other content in the positioned parent:

z-index: -1;

Edit)
See @PaulOB’s post below. :slight_smile:

2 Likes

You would need position:relative on .quotes to create the stacking content for the absolute :before element.

Then you would most likely need a z-index of minus one on .quotes:before (or a higher z-index on the content in that quotes section (only positioned elements can have z-index applied)).

You could probably get away with this:

.quotes{position:relative}
.quotes .container{position:relative;z-index:2;}

If you use rgba you can lose the opacity to avoid creating new contexts.

e.g.Full code.

.quotes {
  background-image: url("https://i.postimg.cc/LXsGqXT8/pexels-kaboompics-com-6663.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  position: relative;
}
.quotes:before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background:rgba(255,255,255,0.4);
}
.quotes .container {
  position: relative;
  z-index: 2;
}
2 Likes

thanks a lot, it worked :slight_smile:

it was really missing just that position:relative for .quotes plus z-index helped bring text to the top

Yes that was the element that created the stacking context but I suggest you still use the other rules I gave as they are more reliable and avoid using opacity.:slight_smile: