scale - background-size in different browsers

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