Image is cut-off

Support
#1

Hi,
The head of the doctor in the background image of section 1 is cut out. Can you please assist?

Thanks!

#2

Hi,

Thanks for writing in!

By default the background image is set to cover which means to scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area

You may set it to contain by adding the code below in the style field of your section element.

background-size:contain !important;

Contain means to Scale the image to the largest size such that both its width and its height can fit inside the content area

For more information, you may refer to the links below.

https://www.w3schools.com/cssref/css3_pr_background-size.asp
https://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=auto

Hope that helps

#3

Thanks. I tried that but it doesn’t work, since we want the image to cover all of the screen, simply not to be cut off at the top. Could you please help?

#4

Hello,

I have checked your site and you can solve this increasing the padding top and bottom like here: http://prntscr.com/gfhzpn -> to increase this padding, go to X > Launch > Section 1 and change it.

#5

Thanks. Is there a way for me to keep the text at a certain height in the section? When I add padding to the section it is automatically pushed down.
Thanks!

#6

Hi,

Instead of increasing the padding, you can adjust the background position by adding the code below in the style field of your section.

background-position: 0 0;

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

Hope that helps

#7

Perfect! That combined with padding did the trick. Thanks :slight_smile:

#8

We’re delighted to assist you with this.

Cheers!