How to resize background images for various viewports

General
1

Here’s a challenge…
I’m working on a website for a HOA that uses a vertical scroll with background image changes (see 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?

2

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

3

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