Welcome to WebmasterWorld Guest from 54.144.80.75

Forum Moderators: not2easy

Message Too Old, No Replies

Multiple backgrounds per div

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

New User

10+ Year Member

joined:Jan 10, 2006
posts:12
votes: 0


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)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 6, 2004
posts:2239
votes: 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

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

Senior Member

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

joined:Mar 15, 2002
posts:6807
votes: 0


And ...

Welcome to WebmasterWorld! [WebmasterWorld.com]

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

New User

10+ Year Member

joined:Jan 10, 2006
posts:12
votes: 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

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

Senior Member from US 

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

joined:Oct 17, 2005
posts:4966
votes: 10


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)

New User

10+ Year Member

joined:Jan 12, 2006
posts:6
votes: 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.

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members