Background image positioning

Support
#1

I would like to position the background image to remain centered (as in these sites: http://www.kimberlyculp.com/ and https://www.lionspeak.net/ )
Attempted to duplicate the above sites background image settings, however the image is cut off on top and does not respond as the two sites mentioned above).

Any help is appreciated.

I have attached site login info in secure note

#2

Hi @XSO,

Thank you for writing in, did you figure it out already? Your banner now behaves the same as this site (http://www.kimberlyculp.com/). Yes, it is being cut on a small screen (mobile) that is because that is how the background-images respond.

More about background-position CSS property.

What you can do about that is like what they did here.

They hide their banner section on smaller screen using the Hide During Breakpoints feature. And then they added a new section for mobile, On that section, they added the image as Image element not as Section’s background, that is why they got the image to respond like that in mobile view.

Hope this helps,
Cheers!

#3

Hi,
Thanks for the rapid response.
No, I have not successfully figured this out.
Their heads are being cut off on laptop and desktop screen resolutions (I understand that if the browser window is wider than these, this will happen)
However, if you look at the other 2 sites, they display much more of the image than my site does.

There is also a slight issue with the opaque text box over the image. It is not centered vertically (due to the padding on the section … ?)

Please advise on how to resolve this.
Thank you for the bit about smaller screens. I will implement that as soon as I can get the main problem resolved.

Thx again for your support.

#4

Hi @XSO,

The cutting of top portion of the background can be solved by setting the background-position to center top

(see the position option)

However, that will cut the bottom portion of the image instead. I think the best thing to do here is to set a min-height: 100vh; to your ROW so it will have the proper height to accommodate your background-image. To do that, add this following custom CSS to your ROW’s Element CSS area.

$el.x-container {
	min-height: 100vh;
	display: flex;
	align-items: center;
 }



Since your ROW has the height now, please zero-out the huge paddings you applied on the Section.

The display: flex; align-items: center; in the CSS code will vertically center your content.

Hope it helps,
Cheers!

#5

@friech You are awesome!
I implemented all of your suggestions.
It definitely helped.
That is much closer to what I was looking for, however the image is now too large.
I would like it to remain in a fixed area and responsive (like the other two sites mentioned previously).
I know that it is possible because both of the other sites use X-Theme, the images stay within a defined area and the image is not cropped as badly as mine was.

I apologize for my ignorance and greatly appreciate your assistance.

#6

Hi @XSO,

In this case, you should try with @friech solution above to use the Hide During Breakpoints feature and create new section for all small screen sizes.

Regards!

#7

@thai and @friech
Thank you for your suggestions.
I believe that I have successfully created what I was looking for.
You can view the page and see that the image responds properly across all resolutions.

Only caveat is that I cannot place text (with opaque background) over the image.

Please assist … ?

#8

Hi @XSO,

I checked and can see that you have added an image element. I am sorry but tht will not work, you will have to set your image as background to be able to put a text over it.

Please follow what my colleague has instructed previously then you can play with the background size and position.

https://www.w3schools.com/cssref/css3_pr_background-size.asp
https://www.w3schools.com/cssref/pr_background-position.asp

Thanks

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.