Background image is not fluid correctly on some browsers


I am trying to make my #header background image fluid so it looks nice on any mobile devices. I am using this simulator to test my site the background image doesn't show the correct aspect ratio in chrome but in firefox it works fine. I don't really know if it looks fine on a real iphone. Can anyone help me fix the background?

background-image: url(images/header.jpg);
background-size: 100%;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
width: 100%;
Problem courtesy of: EdibleMuffin


Using percentages on a background image (or any image for that matter) will cause it to scale to fit the screen, changing the aspect ratio. If you don't want that to happen, but want it to fit the screen and keep the same dimensions, use the following code, else change out "cover" with 100%. This should work in chrome and also with the -ms-filter it should work in IE as well.

background: url(images/header.jpg) no-repeat top;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/header.jpg',     sizingMethod='scale');
-ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/header.jpg', sizingMethod='scale');
Solution courtesy of: samrap


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.