# Having trouble with responsive background images
**URL:** https://forum.pinegrow.com/t/having-trouble-with-responsive-background-images/2323
**Category:** Beginners
**Created:** [October 19, 2018, 1:17pm UTC](https://forum.pinegrow.com/t/having-trouble-with-responsive-background-images/2323 "2018-10-19T13:17:30Z")
**Posts on this page:** 5
**Page:** 1
### Author:  [@HookedHangman](https://forum.pinegrow.com/u/HookedHangman)
#### Post date: [October 19, 2018, 1:17pm UTC](https://forum.pinegrow.com/t/having-trouble-with-responsive-background-images/2323/1 "2018-10-19T13:17:30Z")
So I’m still learning my way around Pinegrow and I’m running into an issue with bkg images not resizing correctly with different screen sizes.I know it’s probably something simple I’m missing but I’m stumped.
For simplicity, assume I’m using Bootstrap Blocks, Header 3 and it’s in a new project with no changes or extra content. Whether I add the background image through Bootstrap properties or CSS, the result is the same. The image is 1600px x 800px
Regardless of whether I set to cover, the image still doesn’t change size with smaller displays. It just runs out of bounds.
Any help would be great because I’m stumped.
---
### Author:  [@Thomas](https://forum.pinegrow.com/u/Thomas)
#### Post date: [October 19, 2018, 9:35pm UTC](https://forum.pinegrow.com/t/having-trouble-with-responsive-background-images/2323/2 "2018-10-19T21:35:08Z")
I assume - it’s having to do with the height of the container. To be precise: Height on hero-sections is mostly defined by padding.
So if you set a smaller padding-bottom by setting an @media for .hero (class) it should resize.
Don’t ask me how to set this in Bootstrap. I’ve never used it - and never will.
Cheers
Thomas
---
### Author:  [@vrooney](https://forum.pinegrow.com/u/vrooney)
#### Post date: [November 11, 2018, 3:57pm UTC](https://forum.pinegrow.com/t/having-trouble-with-responsive-background-images/2323/3 "2018-11-11T15:57:22Z")
There is a good article over at CSSTricks by Chris Coyier on this topic.
> **[Perfect Full Page Background Image | CSS-Tricks](https://css-tricks.com/perfect-full-page-background-image/)**
>
> Four techniques are explored on accomplishing a full page background image that conforms to our exceptions: no white space, scales as needed, retains aspect ratio, centered, and more.
Vince
---
### Author:  [@vrooney](https://forum.pinegrow.com/u/vrooney)
#### Post date: [November 11, 2018, 9:58pm UTC](https://forum.pinegrow.com/t/having-trouble-with-responsive-background-images/2323/4 "2018-11-11T21:58:04Z")
Here are two more examples from Creative Tim that you can download and examine which should assist:
> **[Now UI Kit by Creative Tim](https://demos.creative-tim.com/now-ui-kit/index.html#pablo)**
>
> Free Bootstrap 4 UI Kit
[https://demos.creative-tim.com/paper-kit-2/index.html](https://demos.creative-tim.com/paper-kit-2/index.html)
---
### Author:  [@HookedHangman](https://forum.pinegrow.com/u/HookedHangman)
#### Post date: [November 12, 2018, 3:22am UTC](https://forum.pinegrow.com/t/having-trouble-with-responsive-background-images/2323/5 "2018-11-12T03:22:47Z")
That’s amazing thank you