Overlay for section background photo

HTML & CSS
1

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?

2

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]

3

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

4

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
5

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?

6

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

7

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
8

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
9

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

10

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:

11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.