Div background larger than window height wont scale - html

Question

I have an image that is to be used as a background for a series of "slides" that are all contained within one page. There are four slides total. Each slide is the height of the screen. So I need the background to be 4x screen height. I would also like the image to scale with the screen width. The image is very tall and it does not matter what part of the background is on each slide, so keeping aspect ratios shouldnt be a problem.
The issue i am having is that when i make a window with a width smaller than the images width, part of the image gets cut off instead of scaling to the screen width. My css so far:
#container {
position:relative;
height:100%;
}
#background {
position:absolute;
width: 100%;
height:400%;
background:url(photo.png);
}
.slide {
width: 100%;
height:100%;
position:relative;
}
And the HTML:
<div id="container">
<div id="background"></div>
<div class="slide">
Content 1
</div>
<div class="slide">
Content 2
</div>
<div class="slide">
Content 3
</div>
<div class="slide">
Content 4
</div>
</div>
Note, must be compatible with IE8 and above (ie CSS3 stuff)

Answer 1

Maybe you could use something like that:
<div id="background">
<img src="img.jpg" class="stretch" alt="" />
</div>
and than in css
#background {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: 0;
}
.stretch {
width:100%;
height:100%;
}
I dont know why you dont want to use css3, maybe you got some good purpose, but still I'd recommend to use that.
css3 code is :
background-size: 100%;

Answer 2

You can use Css3 property Background-size
#background {
background-size: 100%;
}