Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • September 28, 2015 at 9:21 pm #510411
    shannab

    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

    September 29, 2015 at 10:13 am #510646
    Yigit

    Hi Shanna!

    Seems like you figured it out already? :)

    Cheers!
    Yigit

    March 15, 2016 at 1:34 am #598080
    shannab

    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

    March 15, 2016 at 5:43 am #598156
    Vinay

    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

    March 15, 2016 at 3:00 pm #598395
    shannab

    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, 7 months ago by shannab.
    March 16, 2016 at 5:08 am #598759
    Vinay

    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

    March 16, 2016 at 2:48 pm #598931
    shannab

    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, 7 months ago by shannab.
    March 21, 2016 at 3:16 am #600942
    Ismael

    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

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