homepage Welcome to WebmasterWorld Guest from 54.166.96.101
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Multiple backgrounds per div
Justus

5+ Year Member



 
Msg#: 8194 posted 5:58 pm on Jan 10, 2006 (gmt 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

 

createErrorMsg

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 8194 posted 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

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



 
Msg#: 8194 posted 7:08 pm on Jan 10, 2006 (gmt 0)

And ...

Welcome to WebmasterWorld! [WebmasterWorld.com]

Justus

5+ Year Member



 
Msg#: 8194 posted 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

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 8194 posted 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

5+ Year Member



 
Msg#: 8194 posted 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved