Footer background = page background ?

Henry

Hey there,

i am really struggeling on this one. I want the same footer on every page with the background of that page.
Some pages are just colored and some have background images. The problem is that the footer always uses the global background color.

i already set the footer-backgroundcolor to transparent
i used a transparent .png as global background image

is there a way to make footer-background transparent?

I am not looking for this code :

#footer-region{
background-color: transparent;
}

or this

.slug-page #footer {
    background-color: transparent;
}

Thanks for any help

arminunruh

i think the body color is not set, only the color of the current grid that you see.
the footer is a different grid
so the footer will always have the background that you set in the footer

put this in lay options → custom <head> content:

<script>
window.laytheme.on("newpageshown", function(){
    var color = jQuery("#grid").css('background-color');
    jQuery("#footer").css('background-color', color);
})
</script>

arminunruh

this will always take the bg color of the current page and set the footer to it

auditoryscenes

I've looked around for the similar issue too. Thanks for the code, it works for me!

auditoryscenes

Hello, I also have a follow-up question. The code works in the desktop version, but it seems not working for the mobile. Is there any solution for this? Thank you very much!

felix_rabe

@auditoryscenes maybe you need to change #grid to #custom-phone-grid and/or #footer to #footer-custom-phone-grid, depending on your layout.

auditoryscenes

@felix_rabe thanks! It works!

Just in case someone also needs this:

Lay Theme Forum

Footer background = page background ?

Before you post:

When you post:

Online Users