How to get a different or responsive footer background image?

[Minna]

Hi!

I have a footer background image set up in child theme with the help you provided in my earlier thread here https://theme.co/apex/forum/t/how-the-get-a-background-image-to-cover-the-whole-footer-area/63916

However it’s not fully responsive, and in mobile view I can only see a small part of the image.

The site in question www.kota-husky.com (still in the making so I’ll give you login details)

[ruenel]

Hello Minna,

Thanks for writing in!

You are using this custom css right:

.mybackground {
    background-image: url(https://www.kota-husky.com/wp-content/uploads/2019/09/susitausta2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

This code will apply the image as a background size. It will use the image to cover the whole .mybackground area which is why it looks like it is being stretch out. Do you want something like this in smaller screens?

If that is the case, you will have to add this custom css:

@media(max-width: 979px){
    .mybackground {
        background-color: #333;
        background-size: contain;
        background-position: bottom
    }
}

And by the way, I would like you to try this demo here: https://davidwalsh.name/demo/background-size.html which would explain how background image works.

We use the background-image: cover; which would cover the whole area of the container. This is responsive enough which will always covers the whole area. The only thing to consider here is that if your image size is smaller, it will be stretch out and if you have a bigger image, it will get cut off.

Yes we can use background-size: 100% 100%; which is also responsive but your image will either be stretch out or get squeezed depending on the size of the container.

Yes we can also use background-size: 100% auto; but then as soon as you resize your browser or on smaller screen sizes, you will probably have white spaces around the image.

Or we can also use background-size: contain; but then this is not a good choice because you will see white spaces around your image.

Hope this helps.

[Minna]

That worked like a charm, thanks so much! And also thanks for the tutorials

[matt]

You’re very welcome, Minna.