How do I size a second div to be 100% height underneath a fixed image?

Question

I'm using semi-transparent PNGs (due to the designer's overlapping of elements) and trying to achieve a layout that represents the design while still working well on the web. Thus I have simple HTML:

<div id="right">
    <div id="welcome"></div>
    <div id="welcomeRepeatingBottom"></div>
</div>

And I'm trying to use CSS as follows:

#right {
    height: 100%;
    position: absolute;
    right: 0px;
    top: 0px;
    width: 430px;
}

#welcome {
    background-image: url("welcome.png");
    height: 614px;
    width: 430px;
    position: absolute;
    top: 0px;
    left: 0px;
}

#welcomeRepeatingBottom {
    background: url("welcomeBottom.png") repeat-y;
    height: 100%;
    left: 0px;
    position: absolute;
    top: 614px;
    width: 430px;
}

The problem is...the #welcomeRepeatingBottom div can't overlap the #welcome div because of the transparency. What I really want is the #welcomeRepeatingBottom div to be height: 100% - 614px, but of course you can't do that. Am I missing something here or do I need to manipulate these values with JavaScript/JQuery?

Answer 1

Maybe you could do it with a combined backgound image that includes the 614px main image plus the bottom image repeated a number of times to accomodate any reasonable browser height (so your overall image might be 1200px or more). Then use this big image as the background in a single div image