Background Image Visible From Top

[mcjensen]

Hello, I’m trying to create a page with an image in the background using the Background Image functionality. When I place the image on the page the image is cut off at the top. How can i position the background image so the top of the image will be visible? I’ve included some screen shots of the page and the original bg image. Thanks

[ruenel]

Hello @mcjensen,

Thanks for writing in! If you have inserted the background image in the body, you must add some paddings to the sections so that there are space to display the background image around the section. To better assist you with your issue, kindly provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
​
To know how to create a secure note, please check this out: https://theme.co/docs/getting-support

Best Regards.

[rad]

Hi @mcjensen,

Thanks for the credentials, I checked and that’s how background works, if the image aspect ratio (dimension) is larger than the content or viewport, then clipping will always occur. The same goes for images set as parallax background, parallax needs movement, and movement from one point to another point requires offset, and that offset is the negative space causing the clipping.

Instead, I recommend utilizing column backgrounds in the builder. That way, you can set a separate image background for each column, then you can simply increase the top and bottom padding of the column to match your preference.

Fixing the background-size that is set to the body isn’t doable as it’s implemented that way, to cover the viewport and clipping always happen since the image should always appear larger regardless of orientation, else, there will be big gaps where image and viewport size doesn’t match.

Thanks!

[mcjensen]

Thanks for your suggestions. I have tried them and while I’m able to populate the background of the column with the image, the content seems to want to spread the entire width of the column as well. I would like it to look something like this. How can I accomplish that?

Thanks.

[nabeel]

Hey @mcjensen,

You can contain the element width by defining the Max-Width, e.g If you’re using Text element, you can define Max Width under Setup (see screenshot)

Now to align the elements left or right to column as in your screenshot. go to Column’s settings and turn on the Flexbox Layout then under Flexbox title, set the Align Horizontal to Start (to align left) or End (to align right) as you need (see screenshot)

Hope this helps!

[ruenel]

Hello @mcjensen,

If you want to have a longer image background, you will have to set a minimum height for at least in one of the columns. You can do that in one of the column settings:

We would love to know if this has worked for you. Thank you.