# How to resize background images for various viewports

**URL:** <https://forum.pinegrow.com/t/how-to-resize-background-images-for-various-viewports/5273>\
**Category:** General\
**Created:** [May 14, 2021, 9:17pm UTC](https://forum.pinegrow.com/t/how-to-resize-background-images-for-various-viewports/5273 "2021-05-14T21:17:57Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![randyrie](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/randyrie/32/2103_2.png) [@randyrie](https://forum.pinegrow.com/u/randyrie)\
**Post date:** [May 14, 2021, 9:17pm UTC](https://forum.pinegrow.com/t/how-to-resize-background-images-for-various-viewports/5273/1 "2021-05-14T21:17:57Z")

</div>

Here’s a challenge…  
I’m working on a website for a HOA that uses a vertical scroll with background image changes (see [IndyPlacesc](https://rjrwebz.com/indyplacesc). However, with the way I have set the site up, as the page width narrows with different viewports, the three background images do not resize event though I’m using “width: 100%;” in the style sheet. I’ve tried many other variation of settings but nothing works.

Anyone have any ideas? Suggestions?

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [May 15, 2021, 10:05am UTC](https://forum.pinegrow.com/t/how-to-resize-background-images-for-various-viewports/5273/2 "2021-05-15T10:05:42Z")

</div>

Hi @randyrie,  
This is a little, not a lot, more complicated than you might think. A lot will depend on the look you are going for. So, the `width: 100%` refers to the size of the div where you placed your background image. I can see further on in your CSS you have the `background-size` property set to `cover`. The problem is, if you have a rectangular image and you are fitting it to a square hole,`cover` crops the photo to take up all the space without distorting the photo. So, if you are too narrow to accommodate the entire width at a specific height the sides are cropped off. You could change `background-size` to `contain`, but then you will get white bars (background page color) at the top and bottom, which might ruin the look you are trying to achieve. You could have a media query that replaces the background image with a square, cropped photo at narrower widths? Otherwise, you are going to have to change the height of your div dynamically to fit the max height of the image and use `contain`.  
Cheers,  
Bob

---

<div class="post-metadata">

**Author:** ![mxs](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/mxs/32/2943_2.png) [@mxs](https://forum.pinegrow.com/u/mxs)\
**Post date:** [May 15, 2021, 3:14pm UTC](https://forum.pinegrow.com/t/how-to-resize-background-images-for-various-viewports/5273/3 "2021-05-15T15:14:38Z")

</div>

use ```  
img src="…" class=“img-fluid”  
this applies the bootstrap css  
.img-fluid {  
max-width: 100%;  
height: auto;  
}