Semi-transparent image overlay for sections and page-header?

Hi,

I'm pretty sure Tom added the semi-transparent overlay inside Photoshop using opacity.

Let me know if you have any other questions.

Stacey is right - the semi transparent layer on those images was added using Photoshop.

You could do it using rgba, but you would have to add an empty div inside each section and set some CSS to it. Let me know if you're interested in that technique.

Thanks so much for the coffees! :)

Hmm.. unfortunately I don´t have access to photoshop, so I´m definitely interested in how to do it with css and an empty div.

(I googled it and read a post about doing it with "fake" background gradients. The articles said this was recommended because to many empty divs was no desirable for some reason. However, I could not figure it out)

So you would add something like this into your section through the "Text" tab:

<div class="section-overlay"><!-- overlay --></div>

Then try this CSS:

.section-overlay {
    background: rgba(0,0,0,0.2);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

Give that a shot and let me know how it works out.

Also, you can use a free editing program like Gimp to add overlays over your images :)

This creates a semi-transparent overlay but the overlay starts in the top left corner so it covers the header but not the entire section background.

Maybe it is easier to just edit the image itself.

Ah yes, you're right. This won't work for full width sections either.

I'll think about it a little more and get back to you :)

I actually found a way I think.... I set the top and bottom padding option in the section to 0 then I made a semi-transparent div inside the section text editor and then used custom css to make negative margins on the side and padding on top and bottom until the div covered the section entirely.

like so:

div.bakgrunn {
   padding-top: 300px;
  padding-bottom: 300px;
  margin-left: -15px;
  margin-right: -15px;
  
    background-color: rgba(255, 255, 255, 0.6);
   
   
 }

This actually works on my screen (macbook pro 13") and on smaller screens (mobile, and iPad) but it will probably not cover the entire section on larger screens? What do you think about this solution?

Let's try this instead:

Give your section a custom class - my-custom-class for example.

.my-custom-class {
    position: relative;
}

.my-custom-class:before {
    position: absolute;
    content: ".";
    background-color: rgba(255, 255, 255, 0.6);
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
}

.my-custom-class .generate-sections-inside-container {
    position: relative;
    z-index: 2;
}

This works! :) Thanks! As I was thinking about this I had another idea. It´s not needed now, but would it also achieve a similar effect if the section background image itself was made semi-transparent against a colored background?

Absolutely :)

Trouble with that is that you would need to save the background image as a PNG which are usually much larger files than JPGs.

Hi Tom, that is great but how I have to change the css if I don't want to have the overlay over the whole background image?

Just like here: http://gndev.info/shortcodes-ultimate/extra/parallax-sections/

I need a white background with opacity instead the black.

Thank you

:-) Andreas

Hi Andreas,

I just answered that for you here: https://generatepress.com/forums/topic/text-in-sections-with-background-images/#post-163630

Hope it helps :)