[Resolved] Semi-transparent image overlay for sections and page-header?

[Are Martin]

Hi again, sorry for posting three questions in a row here… I just had a spark of creativity 🙂 This will be my last for now.

Here we go:

I really like the semi-transparent overlay effect where an image background has a semi-transparent overlay that covers the entire image and then you can put content on top of that. I see that you are also using something similar on the front page of this site and on the add-on page.
How did you achieve this? Is this done with css opacity, rgba, gradients or something else?

The effect I´m talking about can also be seen on wordpress.com

That would be all for now… I´ll buy you a coffee or two for all the good help you´re supplying 🙂

[Stacey Usborne]

Hi,

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

Let me know if you have any other questions.

[Tom]

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! 🙂

[Are Martin]

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)

[Tom]

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 🙂

[Are Martin]

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.

[Tom]

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 🙂

[Are Martin]

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?

[Tom]

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;
}

[Are Martin]

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?

[Tom]

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.

[dinkummate]

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

[Tom]

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 🙂

[Author]

Posts