Extend Homepage body background through footer

Hi all,

Seems like this should be relatively easy fix, but I'm having some difficulty with figuring out how to make it so that the homepage body's (or any page, really) background image extends through the footer background, rendering the footer background transparent, and any text or icons etc. within the footer on the homepage (or again, any page I may decide to do this for in the future) visible.

My website is jrmyprkr.earth and my builder version is 7.1 if that helps. 

Thank you!

Add to Design > Custom CSS

/* Footer transparent */
body.homepage {
    position: relative;
}
body.homepage footer#footer-sections {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 999;
    width: 100%;
}
body.homepage footer.sections section, body.homepage footer.sections .section-background, body.homepage footer.sections .section-border {
    background: transparent;
}

On 6/27/2023 at 1:03 AM, tuanphan said:

Add to Design > Custom CSS

/* Footer transparent */
body.homepage {
    position: relative;
}
body.homepage footer#footer-sections {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 999;
    width: 100%;
}
body.homepage footer.sections section, body.homepage footer.sections .section-background, body.homepage footer.sections .section-border {
    background: transparent;
}

 

Thank you so much! I'm sorry I didn't see this sooner.

If I may impose again, it seems like this worked beautifully on the home page, (where there is a background), but on the remaining pages where there is no image background, it leaves the footer with a black bar behind it? (e.g. jrmyprkr.earth/palabras) is there a way to make it so the footer will have the same transparent background? Hope this isn't askin' too much! Thanks again!

4 hours ago, jrmyprkr said:

Thank you so much! I'm sorry I didn't see this sooner.

If I may impose again, it seems like this worked beautifully on the home page, (where there is a background), but on the remaining pages where there is no image background, it leaves the footer with a black bar behind it? (e.g. jrmyprkr.earth/palabras) is there a way to make it so the footer will have the same transparent background? Hope this isn't askin' too much! Thanks again!

Can you share link to a page where you have problem?

5 hours ago, tuanphan said:

Can you share link to a page where you have problem?

Sure, this one's an example: jrmyprkr.earth/palabras

8 hours ago, tuanphan said:

You can use this new code

/* Footer transparent */
body {
    position: relative;
}
body footer#footer-sections {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 999;
    width: 100%;
}
body footer.sections section, body footer.sections .section-background, body footer.sections .section-border {
    background: transparent;
}

 

That worked perfectly, thank you so much!

Does this apply to the mobile version of the site? It is working on my desktop view but not on mobile.

On 3/26/2024 at 4:55 AM, sourwidows said:

Does this apply to the mobile version of the site? It is working on my desktop view but not on mobile.

What is your site url? We can check easier