# Height of background image

**URL:** <https://community.wpbeaverbuilder.com/t/height-of-background-image/7405>\
**Category:** Beaver Builder\
**Created:** [March 1, 2016, 10:25am UTC](https://community.wpbeaverbuilder.com/t/height-of-background-image/7405 "2016-03-01T10:25:05Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![optiforms](https://community.wpbeaverbuilder.com/letter_avatar_proxy/v4/letter/o/9f8e36/32.png) [@optiforms](https://community.wpbeaverbuilder.com/u/optiforms)\
**Post date:** [March 1, 2016, 10:25am UTC](https://community.wpbeaverbuilder.com/t/height-of-background-image/7405/1 "2016-03-01T10:25:05Z")

</div>

[http://optiformsinc.com/optical-technologies/](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

---

<div class="post-metadata">

**Author:** ![Danny](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/danny/32/3451_2.png) [@Danny](https://community.wpbeaverbuilder.com/u/Danny)\
**Post date:** [March 1, 2016, 4:09pm UTC](https://community.wpbeaverbuilder.com/t/height-of-background-image/7405/2 "2016-03-01T16:09:14Z")

</div>

Hi ,

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

```auto
@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

---

<div class="post-metadata">

**Author:** ![system](https://community.wpbeaverbuilder.com/uploads/default/original/2X/9/9db1b183a7ea1efa26199a2a2b3511d742473dae.png) [@system](https://community.wpbeaverbuilder.com/u/system)\
**Post date:** [April 27, 2019, 10:22pm UTC](https://community.wpbeaverbuilder.com/t/height-of-background-image/7405/3 "2019-04-27T22:22:42Z")

</div>