Forums

18stonedesign

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????

noahgelman

Try changing your css to this.

#topImage {
width:930px;
background-image: url(../images/paperBKGWHT.png) top left no-repeat;
padding-left: 3px;
position:relative;
}

#bottomImage {
background-image: url(../images/paperBKGBottom.png) bottom left no-repeat;
width: 930px;
position:absolute;
bottom:0;
}

treehouse : what would you like to learn today?

Forums

div background images