Welcome to WebmasterWorld Guest from 54.163.100.58

Forum Moderators: not2easy

Multiple backgrounds per div

   
5:58 pm on Jan 10, 2006 (gmt 0)

5+ Year Member



Is there a way to use CSS to make a div have multiple backgrounds? In my case, I need one background fixed at the top of the div that does not repeat, one fixed at the bottom that does not repeat, and a third background that fills any space in between. As far as I know, simply having three seperate divs wouldn't work, because I need the text to span all three backgrounds. Thanks
6:05 pm on Jan 10, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

7:08 pm on Jan 10, 2006 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



And ...

Welcome to WebmasterWorld! [WebmasterWorld.com]

7:09 pm on Jan 10, 2006 (gmt 0)

5+ Year Member




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

8:26 pm on Jan 10, 2006 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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.

4:03 pm on Jan 12, 2006 (gmt 0)

5+ Year Member



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.

 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month