Background image in Section is cut on top and bottom

[intveld]

I’m working on a new home page for one of my sites. The first one in Cornerstone. I used a background image in a Section under some columns with text. Unfortunately, the image is cut on the top and the bottom. And I don’t know how to cope with that problem. I also tried to use the parallax option for that background image, but it didn’t work.

Thanks in advance.

[nabeel]

Hi @intveld,

Thank you for reaching out to us. That’s happening because of the background size property being set to cover, Background images behave differently on different screen sizes, to learn more about background size property please see https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

I went ahead and added the following code in your section’s Element CSS that contains the background image, the following code will change background-size property for larger screens so the image won’t get cropped:

@media screen and (min-width: 1280px) {
  $el .x-bg-layer-lower-image,
  $el .x-bg-layer-upper-image{
    background-size: contain !important;
  }
}

Hope this helps!

[intveld]

Many, many thanks Nabeel!
Looks wonderful now

[lely]

You’re always welcome @intveld!

Cheers.