Background Image Height

Support
#1

Hi,

We are using ThemeX. I have a page called https://getbusiness.fit/digital-marketing-made-easy-half-day/

About halfway down I have a section with a Background Image, which is of me on stage (see the attachment), and the background image is only very narrow when it shows on the desktop. There are no elements inside the section, except the background image.

How do I make the height of the background image default to the height of the image or set the minimum height of it?

Thanks, Mike

#2

Hey @mikedoughty,

There are two solutions for this.

  1. Use an Image element so regardless of the screen width, all parts of your image will be shown. You will need to set all paddings of your section and row to 0 and turn of your row’s Inner Container option so that the image spans fullwidth. Your image’s resolution also needs to exceed the width of your monitor’s resolution.

  2. Add Gap elements inside your section. The Gap elements should have different sizes and one shown on desktop only using the Hide During Breakpoints feature. This way, you can adjust the section’s height on certain breakpoints.

Hope that helps.

#3

Hey Mike,

Showing a portion or cropping is not possible with option 1. You will need to use option 2 (Section with Gap element and background image) in this case. You can use the Gap element in combination with the Size and Position of the Background.

To learn what values you can use for the background size, please see https://www.w3schools.com/cssref/css3_pr_background-size.asp

For the position, please see https://www.w3schools.com/cssref/pr_background-position.asp

If you want to show only a portion of your image permanently, I would recommend that you edit your image in an image editor and then use option 1.

Thanks.

#4

Hey Mike,

Showing a portion or cropping is not possible with option 1. You will need to use option 2 (Section with Gap element and background image) in this case. You can use the Gap element in combination with the Size and Position of the Background.

To learn what values you can use for the background size, please see https://www.w3schools.com/cssref/css3_pr_background-size.asp

For the position, please see https://www.w3schools.com/cssref/pr_background-position.asp

If you want to show only a portion of your image permanently, I would recommend that you edit your image in an image editor and then use option 1.

Thanks.

#5

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