createErrorMsg
msg:1178742 | 6:05 pm on Jan 10, 2006 (gmt 0) |
| 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
|
DrDoc
msg:1178743 | 7:08 pm on Jan 10, 2006 (gmt 0) |
And ... Welcome to WebmasterWorld! [WebmasterWorld.com]
|
Justus
msg:1178744 | 7:09 pm on Jan 10, 2006 (gmt 0) |
<!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
|
Fotiman
msg:1178745 | 8:26 pm on Jan 10, 2006 (gmt 0) |
Maybe try this:
Don't define heights on your outter divs. DO define padding where appropriate. <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.
|
imaginecss
msg:1178746 | 4:03 pm on Jan 12, 2006 (gmt 0) |
I think what you mean is on different pages you actually want div A to show background A, On page B you would like div A and page 2 you would like it to show background B. 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.
|
|
