Footer background transparent so you can see image behind it

Home Forums Icelander Footer background transparent so you can see image behind it

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

    HoCoMN
    Participant

    Footer background transparent so you can see image behind it

    Resolved

    Hey there! Have you noticed this support service is provided FREE of charge?
    If you like the speed and accuracy of resolutions, please consider supporting me with a small donation. Thank you

    Consider a donation →

    I am trying to make the footer a bit translucent so i can see the background image behind it and have it scroll over the top. If you look at our site, you will see the image in the background and the content scrolls over it. I want to be able to see that behind the footer.

    #20819

    Oliver Juhas
    Keymaster

    Hi HoCoMN,

    Please understand that the image is in the page content only and making the footer transparent will not cause it to display image beneath.

    But you can set the footer image in theme options in Appearance → Customize → Theme Options → Colors: Footer. Simply set the same image and its position. This will apply globally for all footers in your website.

    If you want to apply the image on the footer for that particular page only, I suggest adding custom CSS into Beaver Builder‘s layout CSS for that page. It’s the easiest way. Here is the CSS you can use:

    .home .site-footer::before {
    	display: block;
    	background: url('YOUR_IMAGE_URL_HERE');
    	background-attachment: fixed;
    	background-position: 50% 50%;
    	opacity: .25;
    }

    Best regards,

    Oliver Juhas
    WebMan Design

    #20826

    HoCoMN
    Participant

    Thank you!

    When I put that CSS in the individual page, it works great. But doesn’t work when I put it in the whole site’s additional CSS box. I would like that to be on every single page. This is my code.

    .home .site-footer::before {
    display: block;
    background: url(‘http://hocomn.us/wp-content/uploads/2019/02/Como-Falls-Banner-1.jpg’);
    background-attachment: fixed;
    background-position: 50% 50%;
    opacity: .05;
    }

    #20827

    Oliver Juhas
    Keymaster

    Hi HoCoMN,

    If you would like that to apply on every single page, simply use the theme option I’ve mentioned in my previous reply :)

    Best regards,

    Oliver Juhas
    WebMan Design

    #20828

    HoCoMN
    Participant

    I did. When I set the image with the theme options, it sets it but the transparency doesn’t work. If I add the code to the theme’s additional CSS the transparency works but it is not “fixed” any more and it rolls up and down with the page. Only on the homepage does it stay fixed and the content rolls on top of it. I hope that makes sense. :)

    #20829

    Oliver Juhas
    Keymaster

    Hi HoCoMN,

    What do you mean? I’ve just tested the theme option to set a footer image and edit its opacity and it works perfectly fine:

    The CSS I provided is not global. It is only for homepage. To make it global you can just replace the .home with .site. But the theme option should work perfectly fine for you too.

    Best regards,

    Oliver Juhas
    WebMan Design

    #20830

    HoCoMN
    Participant

    I see what you mean now. I didn’t have Fix Image Position checked. Will this code also work for the Intro box that shows the page name?

    #20831

    Oliver Juhas
    Keymaster

    Hi HoCoMN,

    No, the code is only for footer. Please try using your web browser code inspector to determine the CSS for your theme modifications. Or please hire a help.

    Here is a CSS code that can help for intro section:

    .intro::before {
    	content: '';
    	display: block;
    	position: absolute;
    	width: 100%;
    	height: 100%;
    	left: 0;
    	top: 0;
    	background: url('YOUR_IMAGE_URL_HERE');
    	background-attachment: fixed;
    	background-position: 50% 50%;
    	opacity: .25;
    }
    
    .intro-inner {
    	position: relative;
    }

    Best regards,

    Oliver Juhas
    WebMan Design

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.