Height of background image

Beaver Builder
1

http://optiformsinc.com/optical-technologies/

I’m trying to use large hero images on my site that degrade nicely to mobile viewports.

These background images, like the visual spectrum used on this page, are 1800x500. I add them as a background image where Width = Full Width and Content Width = Full Width, Attachment = Scroll and Scale = Fill.

Unless I add Top and Bottom Padding of 150 px I don’t see the full height of the image (default only displays about 165 px high). The extra padding looks fine on desktop but that height carries through to mobile, which is too tall.

I bet this is settings issue, but what is the best way to add my wide images as background images that display fully at 1800x500 at desktop and preserve that aspect ratio down to mobile?

Thanks

2

Hi ,

You will want to reduce the padding using a media query for mobile devices. Like so:

@media (max-width:768px) {
  .fl-node-56d08d081bc30 .fl-row-content-wrap {
    padding-top: 150px;
    padding-bottom: 150px;
  }
}

Then change the padding-top and padding-bottom values.
Thanks,
Danny