Web design reattivo: "Come ridimensionare un'immagine di sfondo in base alle dimensioni della finestra del browser utilizzando CSS"?

Question

Sto creando un sito in cui le mie immagini di tutti i prodotti verranno ridimensionate in base alle dimensioni della finestra del browser, quindi ho scritto alcune query multimediali in cui ho usato una grande immagine e ridimensionata in diverse dimensioni della finestra ma ho un'immagine che ho usato in background, come posso ridimensionarlo? Voglio sostenere in tutti i browser anche in IE7 e 8.

HTML

<div></div> 

CSS

div{ 
background: url("http://canadianneighborpharmacy.net/images/cnp/discount_20.png") 
no-repeat scroll 0 0 transparent; 
position:absolute; 
width:45px; 
height: 45px; } 

Il mio codice dal vivo è qui: - http://jsfiddle.net/jamna/DdxbQ/19/ qui ho un principale "immagine del prodotto" che ora sta ridimensionando in base alle dimensioni della finestra del browser (nel mio caso non ho ancora scritto il codice per ridimensionare l'immagine del prodotto, sto solo mostrando quale immagine voglio ridimensionare ora) ma ho un un'altra immagine "salva-prezzo etichetta" che si trova sullo sfondo di una "span" che voglio ridimensionare simultaneamente con l'immagine del prodotto.

Answer 1

per questo si può utilizzare background-size proprietà

come:

body{ 
background-size:cover; 
-moz-background-size:cover; 
-webkit-background-size:cover; 
} 

sono altri immobili come contain & 100% 100%

controllare questo link http://css-tricks.com/3458-perfect-full-page-background-image/

per IE è possibile utilizzare filter

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale'); 
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')"; 

EDIT: si vive il codice è giusto, ma bisogna definire la larghezza & altezza in percentuale come questo

http://jsfiddle.net/sandeep/ayUKz/3/

& è possibile utilizzare img tag piace anche questo http://jsfiddle.net/sandeep/RMGnM/

img{ 
position:absolute; 
width:100%; 
height: 100%} 

EDIT:

può essere che si desidera è di controllo http://jsfiddle.net/sandeep/DdxbQ/20/

questo link anche http://www.alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html