Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #510411

    Hi, I have a background image in the footer.

    I am repeating same image on the home page to create a cool effect while scrolling. Rather than create an image for the content of the home page, and a separate darker one for the footer, I’d like to try this approach and see if it works:

    To put in QUICK CSS area, a transparent color overlay on top of the footer section – 75% of black on top so it’s darker than the original image. The text is hard to read down there. I will change the image frequently so this is my solution.

    Here is the website so you can see what I mean: http://rusticbest.com

    Any way you can tell me what this .css would be?

    Awesome template, I hope you keep it going forever!
    Shanna

    #510646

    Hi Shanna!

    Seems like you figured it out already? :)

    Cheers!
    Yigit

    #598080

    Hi Yigit,
    Sorry for such slow reply back here…
    I never did figure out a .css for the question I have above. In my footers, when I change an image on the home page, I have to create a second darker image which is kind of a pain. I am still looking for .css code that would just put a dark overlay on my footers for this site.

    Thanks.
    Shanna

    #598156

    Hi!

    To add a footer overlay please use the below css in Enfold > general styling > Quick CSS

    #footer {
         background:rgba(0,0,0,0.3);
     }

    adjust the value 0.3 to suit your design.

    Regards,
    Vinay Kashyap

    #598395

    Hi Vinnie,
    Thanks, unfortunately didn’t work.

    Not sure if I described that right, I put a background in my home page designs in several places so when you scroll it appears to continue with different overlays in the color sections.

    I repeat it in the footer, and would like to use the same effect there, using a dark color overlay so in that area it’s darker.

    The quick code you gave is a solid gray covering my image completely. Any other suggestion?

    • This reply was modified 8 years ago by shannab.
    #598759

    Hey!

    I understood you don’t want to use 2 background images dark one for footer and normal for the content area. instead you like to use one background for content area with a slightly transparent footer which acts as a dark overlay for the content background image.

    Please refresh the cache if you are using any cache plugins it will take a while to refresh.

    Feel free to change the value 0.85 as required.

    #footer {
         background:rgba(0,0,0,0.85)!important;
     }
    

    if you still have any issue please create a temporary user with ‘administrator’ role and share in private content with permission to deactivate all plugins and add custom code if necessary to help you resolve this issue.

    Regards,
    Vinay Kashyap

    #598931

    Thanks Vinnie, but that is still not working, it’s a solid, not transparent, just a darker gray now.

    I’ll play with it and give you access if still need be.

    • This reply was modified 8 years ago by shannab.
    #600942

    Hey!

    A screenshot of what you’re trying to do will help. Or try to replace the css code with this:

    .footer_color:before {
        content: '';
        display: block;
        width: 100%;
        height: 1000px;
        background: rgba(0,0,0,.5);
        position: absolute;
        top: 0;
    }

    Regards,
    Ismael

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.