I am having problems repeating a div background on a y-axis if the div contains another div with a background image?
So far my CSS code looks like this:
#topImage {
width:930px;
background-image: url(../images/paperBKGWHT.png);
background-repeat: repeat-y;
padding-left: 3px;
}
#bottomImage {
background-image: url(../images/paperBKGBottom.png);
background-repeat: no-repeat;
width: 930px;
background-position: bottom;
vertical-align: bottom;
}
My HTML looks like this:
<body>
<div id="topImage">
<div id="bottomImage"
</div>
</div>
</body
When viewed in a browser the "topImage" repeats on a y-axis and pushes the "bottomImage" off of the page.
If I specify a height to the "bottomImage" div it works fine, but I don’t want to have to create 15 different CSS layouts just for this effect to work on all pages.
Anyone got any ideas????
