background-size in different browsers - cross-browser

Question

I have some difficulties showing a scaled background on different browsers. I created the website on a Google chrome browser, but when loading the site on a iPhone or earlier version of IE, the background doesn't scale, or just doesn't show at all.
I simply used the css code:
background-size: 100% 150%;
Then I changed it to:
background-size: auto;
But this still gives some troubles.
Any idea how I could resize/scale this image on every browser and IE from version 6 to now?
EDIT
With the code below, everything works on Chrome, FF and latest IE, But on IE8(and below I think) it show the unstretched picture. On iPhone it simply doesn't show anything at all. :/
#head-div
{
padding-bottom: 15%;
width: 100%;
background: url(../img/banner.gif) no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/banner.gif', sizingMethod='scale');
}

Answer 1

body {
background: url(image.jpg) no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.jpg', sizingMethod='scale');
-ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.jpg', sizingMethod='scale');
}
These are the requirements for cross browser. There's like 5 of these exact questions already on stack overflow with answers exactly like mine so there was no need to ask this question

Answer 2

I suggest using the CSS3Pie polyfill script.
This script seamlessly adds support for various CSS features to old IE versions, including background-size.
It works in IE6 and up, and requires only a tiny bit of extra code in your CSS file to activate it, which other browsers will ignore entirely.