How do I set a section background image?

[brettlang2]

Hello,
I’m trying to set a section background in the latest X theme update. A similar problem was discussed here:
Previous BG image question

I’m looking to do something like this page.

But I still can’t find in the new interface how to set a seamless fill image.
Please help!
Thanks for your time.
B

[ruenel]

Hello @brettlang2,

Thanks for writing in! You may need to understand how background images work. 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 cover 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.

If this isn’t helping, please provide us the URL of the page where you have inserted your background image so that we can inspect it. We may be able to figure out what have you missed or done incorrectly.

Best Regards.

[brettlang2]

@ruenel, much appreciated. I’ll return if I have issues.

[tristup]

Hi @brettlang2,

Glad that we are able to help you. Please let us know if you have any further issues with this.

Thanks