How the get a background image to cover the whole footer area?

[Minna]

I can’t find a way to get a background image to cover the whole footer area.

This is the code I have at the moment but it only shows up the background image in the top colophon, not bottom:

footer.x-colophon { background-image: url(img-url); }

Thank you for any help!

[jade]

Hi Minna,

Perhaps there is a CSS code that adds a while color background to the bottom footer area. Try adding this as well:

.x-colophon.bottom { 
    background-color: transparent; 
}

If the background image does not cover the bottom footer area still, please provide the URL of the site in question so that we can check it.

Thank you.

[Minna]

Thank you. That helped, now the image shows up on both top and bottom footer, BUT it is showing the images separately on both sections and repeating them too…when I wish to have just one full image covering both sections. Any ideas?

[Prasant]

Hello Minna,

Thanks for updating the thread.

In order to stop the background from repeating, you can add following CSS into the code under X > Theme Options > CSS:

footer.x-colophon {
    background-repeat: no-repeat;
}

I tried looking at the websites and one of the website is having a coming soon page active. Is this the website in question over here? I also looked at other website and don’t see any issues with the footer. Please share the admin login details in secure note for us to take a closer look.

Thanks.

[Minna]

Thank you for the answer. Login details are below.
Also is it possible to have the background responsive?

[friech]

Hi Minna,

I understand what you’re trying to do here, but that is not quite possible with just a CSS. As you can see the footer are two separate part x-colophon top and x-colophon bottom you can’t apply the same background on these div, I mean you can but not with one instance.

What you need to do is wrap that two x-colophon in one div and apply the background on that wrapping div instead. To do this, first you need to setup a child theme.

Then copy the file wp-footer.php on this directory \pro\framework\legacy\cranium\footers\views\ethos, copy that file to your child theme, same directory, create the folders/path if it does not exist.

Open/edit the file wp-footer.php that is on your child theme. Wrap the entire code of that file with a div with a class

e.g.

<div class="mybackground">

Don’t forget the closing </div> tag at the bottom. Then save the file.

After that, to apply the background on that wrapping div, add this to your child theme’s style.css file or on Theme Options > CSS

footer.x-colophon {background-color: transparent !important;}
.mybackground {
    background-image: url(https://www.kota-husky.com/wp-content/uploads/2019/09/taustasudet-jpg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

Make sure your child theme is active then save.

Let us know how it goes,
Cheers!