Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

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

Home Forums Support Semi-transparent image overlay for sections and page-header?

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #158621
    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 🙂

    #158628
    Stacey Usborne
    Staff

    Hi,

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

    Let me know if you have any other questions.

    #158630
    Tom
    Lead Developer
    Lead Developer

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

    #158645
    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)

    #158683
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #158693
    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.

    #158780
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #158798
    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?

    #158850
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #158876
    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?

    #158877
    Tom
    Lead Developer
    Lead Developer

    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.

    #163608
    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

    #163631
    Tom
    Lead Developer
    Lead Developer
Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.