Background image is not fluid correctly on some browsers

Problem

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 http://transmog.net/iphone-simulator/mobile-web-browser-emulator-for-iphone-5.php?u=http://toarumajutsunoindex.me/ 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-repeat:no-repeat;
background-position:top;
background-size: 100%;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
width: 100%;
Problem courtesy of: EdibleMuffin

Solution

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

Discussion

There is currently no discussion for this recipe.

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