Forum Moderators: not2easy
Is there a way to use CSS to make a div have multiple backgrounds?
CSS3 will allow for this, but widespread support will be a long time coming. For now, the solution is to use three divs, but rather than stack them up, you nest them...
html:
<div id="one">
<div id="two">
<div id="three">
<p>Text text text.</p>
</div><!--close three-->
</div><!--close two-->
</div><!--close one-->css:
#one{
background: url(middle_image.gif) center top repeat-y;
}
#two{
background: url(bottom_image.gif) center bottom no-repeat;
}
#three{
background: url(top_image.gif) center top no-repeat;
}
This ought to at least give you a place to start. Positioning details will depend entirely upon the size and orientation of your images.
cEM
Welcome to WebmasterWorld! [WebmasterWorld.com]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>
<head>
<style type="text/css">
<!--
#one{
width: 750px;
height: 100%;
background: url(bg2-middle-thin.jpg) top repeat-y;
}
#two{
height: 211px;
width: 750px;
background: url(bg2-bottom-thin.jpg) bottom no-repeat;
}
#three{
width: 750px;
height: 303px;
background: url(bg2-top-thin.jpg) top no-repeat;
}
-->
</style><title>Untitled</title>
</head>
<body><div id="one">
<div id="two">
<div id="three">
<p>Text text text.<br>
Text text text.<br>
Text text text.<br>
Text text text.<br>
Text text text.<br>
Text text text.<br>
Text text text.<br>
Text text text.<br>
Text text text.<br>
Text text text.<br>
Text text text.<br>
Text text text.<br>
Text text text.<br>
Text text text.<br>
Text text text.<br>
Text text text.<br>
Text text text.<br>
Text text text.<br>
Text text text.<br>
Text text text.<br>
Text text text.<br>
Text text text.<br>
Text text text.<br>
Text text text.<br>
Text text text.<br>
Text text text.<br>
Text text text.<br>
Text text text.<br>
Text text text.<br>
</p>
</div><!--close three-->
</div><!--close two-->
</div><!--close one--></body>
</html>
That's what I tried, and I had a couple of problems: bg2-middle-thin.jpg didn't tile all the way to the bottom of the text, it only tiled once or twice, and bg2-bottom-thin.jpg was hidden behind bg2-top-thin.jpg all the way at the top of the page. Any help is much appreciated
<style type="text/css">
<!--
#one{
width: 750px;
padding: 0;
padding-bottom: 20px; /* Height of bg image */
background: url(bg2-bottom-thin.jpg) bottom no-repeat;
}
#two{
width: 750px;
padding: 0;
padding-top: 20px; /* Height of bg image */
background: url(bg2-top-thin.jpg) top no-repeat;
}
#three{
width: 750px;
height: 303px;
padding: 0;
background: url(bg2-middle-thin.jpg) top repeat-y;
}
-->
</style>
+-- Box 1 ----------+
¦+-- Box 2 --------+¦
¦¦^^^^^^^^^^^^^^^^^¦¦
¦¦+-- Box 3 ------+¦¦
¦¦¦\\\\\\\\\\\\\\\¦¦¦
¦¦¦\\\\\\\\\\\\\\\¦¦¦
¦¦¦\\\\\\\\\\\\\\\¦¦¦
¦¦+---------------+¦¦
¦+-----------------+¦
¦vvvvvvvvvvvvvvvvvvv¦
+-------------------+
Not sure if that'll work, but that's how I would have tried it.
I define the basics of the main containing div. Then create single definitions for each background
.middle {
definitions
.middlebg1{
background-image: url(images/background_web_design.gif);
background-repeat: no-repeat;
.middlebg2{
background-image: url(images/background_web_design2.gif);
background-repeat: no-repeat;
Then when on the page i combine the to two
<div class="middle middlebg2">
This should cascade and overwrite your baseline default background image.
hope that helps.
