Footer Background Image

Hi Phil,

It’s likely that the issue is that the image has a subject which is being cropped when the background image is set to cover and in a fixed position. Usually we try to use more abstract images for background cover images as it’s not so bad when the images are automatically cropped for different screen sizes.

Adding this to “Customizer – Additional CSS” could fix your problem …

#footer-wrapper {
background-attachment: scroll;
background-position: top center;
}

Let me know.

Oliver

Thanks Oliver for your reactivity and your adding in CSS !
It’s better for the shown footer in mobile device but for desktop the top of image is still reduced.
I tried “left center” and I think it’s necessary also to reduce the image.
What do you think about this ?

Phil

Hello Phil,

I see you’ve changed top center to left center which cuts off the top of the image on my laptop. Your problem is that this is not an abstract image, it is an image with a subject so the background-position property needs to be used here to tell the browser where the focus of the image should be so it knows what is OK to crop.

If you were to cut the person with the tree off from the left of the image and remove the subsequent whitespace at the top of the image that might allow my suggested top center value to be more pleasing for you.

It’s always tricky to use a cover image that has a subject of focus rather than being abstract because you will almost always have a device that crops the image where you don’t want it to.

That is one of the challenges of responsive web design ??

Oliver

Hi Oliver !

Thanks for your advise.
I will try to change my image.

Phil