I need to keep my background images from zooming in

[emurrell17]

So I’m having this issue in X Pro–both in the header builder, and also in the regular pro (content, I guess?) builder:

So let’s say I add a background image to the lower layer. Everything’s going fine. But I need to move the spacing of some elements around so that the certain parts of the background of the image aren’t making the text hard to read, or aren’t being covered up by elements that I have place on top of it. Here’s where things are getting screwed up for me.

Link

So there are two examples on this page. This first is the header image. You may not be able to tell, but it’s quite a bit zoomed in. There is actually a tiger running around the field that we can’t even see because we are so zoomed in.

When I added text, it’s not in the place I need it to be. So I added some gaps and messed with the size of the gaps using EM, REM, px, and even %. All of them seemed to have a similar issue that causes the background image to zoom in. How can I move the modules around without ruining my background image?

The second example is with the bible background image lower down the page. This one isn’t as blatant, but it’s still annoying. Basically I had to add a gap below my content modals to get them to be above the bible. When I do that though, it causes the image to be zoomed in again, this time causing the bible to be much more in the foreground than I would like.

P.S. Also, I’ve never really used the horizontal gaps before. When I try to add one and drag it to the left of a module, it won’t allow me to place anything there. What am I doing wrong?

Thanks in advance, you guys are great!

[ruenel]

Hello @emurrell17,

Thanks for writing in! By the default, the background image will be resized because it is set to cover the whole section where you added it as a background. 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.

Hope this explains the background image property briefly. Thank you for your understanding.

[emurrell17]

Hmmmm…

First off, I appreciate the quick response!

But so what I’m taking away from that is that really I just need a different sized image to make it not zoom in. Do I need a wider image so that even when it does zoom in it balances out to the place it should be? Is that the right kind of logic at least?

[ruenel]

Hello @emurrell17,

It does not require a really wide image. It just needs a decent image dimension that when you change the browser size, the image can cover the whole section nicely. Too small image size will get stretched out which look like it is blurred or pixelated. Too wide image may also get squeezed out. The best and recommended size could be 120% of the width and height of the section where you will be adding the image.

Hope this helps.

[emurrell17]

This does help, thank you!

[emurrell17]

Wait, wait. I forgot the other half of my question, lol.

What you said makes perfect sense about making the image be the right size for the space in general, but is there really no way for me to move text around the screen without causing the image to be changed? That seems crazy.

Like, the image is the right size before I add gaps (or margin to the text), but then the image gets blown up when I try to move the text around. I don’t understand why me moving the text on top of the image is effecting the image itself.

Here is a screenshot of what I need to do with the spacing for the text.

[ruenel]

Hello @emurrell17,

I can see that you have two containers in the bar which serves as your header banner. You will need to remove the first container and only one container should remain. You can then click the container and in your container settings, you align the contents to the lower right. It is in the Flex Layout “End”, “Center”.

I have logged in and duplicated your header. Please check out the duplicated header and how I set up the container for the texts.

Hope this helps. Please let us know how it goes.

[emurrell17]

I copied over all of those settings but the text is still not in the right place, and if I try to move it with gaps or margins, it still zooms in. Thanks!

[thai]

Hi @emurrell17,

In this case, please reduce the bottom padding then increase the top padding of your bar:

Screenshot

Hope it helps

[emurrell17]

Sweet! Thanks Thai! That did work pretty well; any idea why the second headline is indented thought? I don’t think I did that (on purpose anyway) and I can’t seem to get the two texts to line up horizontally.

[thai]

Hi @emurrell17,

To line up your headlines, please add the left padding to your container(abour 45%):

The Flex Layout > Horizontal option should be Start:

Then remove the max-width of your headline:

Hope it helps