Best way to rescale a background image in a div?

HTML & CSS
1

What would be the best way to rescale a background image in a div when the viewport is made smaller?

Thank you in advange.

2

Hi,

It depends on the image and also what you want to achieve.

Using background-size you can now scale background images for modern browsers (ie9+) in a variety of ways. Scaled images are never as good as the original of course but results can be satisfactory depending in the image used.

However sometimes by shrinking an image you lose the important part of the image as it goes smaller and you mat be better off just centering the normal size image in the background. You could also use media queries and when the viewport reaches a certain point swap the image for a smaller more pertinent one. The downside of course is loading two images instead of one.

3

Hi Paul. Thank you for the advise. Please have a look at this site. The people would like me to make the site responsive, what is going reasonably well, as you can see [URL=“http://grandcafesloterplas.sothenwhat.com/”]here. But I am struggling to get the wine glass ok. I was thinking, of centering it under the text and make it more transparant and then make it scale when the vieport is made smaller, but I have no idea how to do that.

Thank you in advance

4

Why can’t you just float it to the right as before and let it scale with the layout as you are doing for the other images in the header?

e.g. roughly:


<div id="content">
<p class="imgfloat"> <img width="100%" src="http://www.grandcafesloterplas.nl/photoshop/main%20home.png" alt=""> </p>
<p>Gelegen aan de grootste plas, op de mooiste lokatie van Amsterdam, heeft Grand Café Sloterplas zijn deuren in maart 2006 geopend en is uitgegroeid tot een hip en trendy horecagelegenheid.</p>



.imgfloat {
	float:right;
	margin:10px;
	width:30%
}
5

Hi Paul. Thank you for that.

Why can’t you just float it to the right as before and let it scale with the layout as you are doing for the other images in the header?

Do you mean with the max-width property?

6

Yes you can use a percentage width in combination with min and max width to stop the image getting too big or too small.

7

Thank you Paul, it works great.