Responsywne projektowanie stron internetowych: "Jak zmienić rozmiar obrazu tła zgodnie z rozmiarem okna przeglądarki przy użyciu CSS"?

Question

Tworzę witrynę, w której wszystkie moje produkty będą miały ponownie rozmiar zgodnie z rozmiarem okna przeglądarki, tak więc napisałem kilka zapytań o media, w których użyłem jednego dużego obrazu i zmieniłem rozmiar w innym rozmiarze okna, ale mam jedno zdjęcie: które używałem w tle, jak mogę zmienić rozmiar? Chcę ją wspierać we wszystkich również w przeglądarce IE7 i 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; } 

Mój kod na żywo jest tutaj: - http://jsfiddle.net/jamna/DdxbQ/19/ tutaj mam główną "obraz produktu", który jest teraz zmieniany zgodnie z rozmiarem okna przeglądarki (w moim skrzypce nie napisałem jeszcze kodu do zmiany rozmiaru obrazu produktu, pokazuję tylko, który obrazek chcę teraz zmienić), ale mam kolejny obraz "oszczędzania pieniędzy", który jest w tle "rozpiętości", chcę zmienić rozmiar jednocześnie z obrazem produktu.

Answer 1

do tego można użyć background-size nieruchomości

odczuwalna:

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

istnieją inne właściwości, takie jak contain & 100% 100%

Sprawdź ten link http://css-tricks.com/3458-perfect-full-page-background-image/

dla IE można użyć filter

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

EDIT: żyjesz kod ma rację, ale trzeba zdefiniować szerokość & wysokość w procentach jak to

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

& można użyć img tag również tak http://jsfiddle.net/sandeep/RMGnM/

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

EDIT:

może być to chcesz http://jsfiddle.net/sandeep/DdxbQ/20/

Sprawdź ten link również http://www.alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html