Responsive web design : “How to resize a background image according to browser window size using CSS”?

Question

I am creating a site where my all products images will be re-size according to browser window size so i wrote some media queries where i used one big image and re-si

Answer 1

for this you can use background-size property

Like :

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

there other properties like contain & 100% 100%

check this link http://css-tricks.com/3458-perfect-full-page-background-image/

for IE you can use filter

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

EDIT: you live code is right but you have you define width & height in percentage like this

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

& you can use img tag also like this http://jsfiddle.net/sandeep/RMGnM/

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

EDIT:

may be that's you want http://jsfiddle.net/sandeep/DdxbQ/20/

check this link also http://www.alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html