Resize background-image to fill the page height-wise, but allow elements on either side

Question

I'm having a lot of issues trying to do this, and I'm now wondering if it's even possible in css. (Maybe I will need to find some other way using PHP, Flash or Javascript!)

Basically, I have 3 images. Each are 1920x1200 (x*y) in size. When placed from left-to-right they form an image of a landscape. I want to create a webpage in which you scroll horizontally to see each part of the site with the 3 images being the background-images of the div elements and touching each other on either side. The scrolling was going to be handled with this (which is also the reason why .items needed to be position: absolute.) For the most part, I've been able to create this:

HTML:

<div class="items">
    <div class="item" id="item1"><a name="item1"></a>
         text
    </div>

    <div class="item" id="item2"><a name="item2"></a>
         more text
    </div>

    <div class="item" id="item3"><a name="item3"></a>
         even more text
    </div>
</div>

CSS:

#item1, #item2, #item3 { 
    float: left;
    width: 1920px;
    height: 1200px;
}
#item1 {
    background: #ffffff url(../../images/main/1.jpg);
}
#item2 {
    background: #ffffff url(../../images/main/2.jpg);
}
#item3 {
    background: #ffffff url(../../images/main/3.jpg);
}
/* our additional wrapper element for the items */ 
.items { 
    width: 5790px;
    position: absolute;
}

However, the issue that I have is that I need to make this work for multiple screen sizes and resolutions. What I would like to be able to do, is to make the height of each of the #itemn to be 100% of the visible page, but I am unable to do so without stopping the div elements from appearing left-right. Often it causes them to appear on top of each other.

I tried following out the instructions here and using an img. But, by setting the position to fixed or absolute I caused the images inside the div elements which I had previously floated left to appear on top of each other.

Just to be clear, the effect that I am going for is like this sites', but I need the background image to be resized height-wise to fit the page, otherwise it will look bad on different resolutions from my machine. I can provide more explanation if needs be, but I think I've summed up the problem pretty well. Is it possible to fix this in any way - perhaps using Javascript, PHP, or Flash?

EDIT

I just found that there is a CSS3 property that does exactly what I need (background-size), but it's not implemented in most browsers... A hack would be to use -moz-border-image and then use php to place the correct height and width px into the css. I do not want to do that!

Answer 1

Can you use photoshop to combine your three images into one large image? If you do the technique shown on CSS tricks should work.