Quick CSS help. [Archive] - Web Hosting Talk

eagleknight

09-10-2004, 10:32 AM

I need some quick advice on how to complete this in CSS. I have two images for background images for bars on the page. I want tone to go across the top and the other on the left . I did have the css as...

body {
background-image: url(top.jpg);
background-repeat: repeat-x;
background-image: url(left.jpg);
background-repeat: repeat-y;
}

That didn't work. I alsoed tried using as in a div, but that didn't work either. :eek:

the_pm

09-10-2004, 10:41 AM

Try this:

body {
background:url(left.jpg) repeat-y
}

#parent {
background:url(top.jpg) repeat-x
}

**********

<body>
<div id="parent">

The rest of your page goes here.

</div>
</body>

To overlap backgrounds, you just need to specify nested containers, each holding one of the backgrounds. In this case, a div is "nested" into the body, and the rest of your content is nested into that div.

eagleknight

09-13-2004, 08:22 AM

Hmm this didn't work. When I use the div the bar on the left only starts to show up once something is put into the body. It is like it isn't repeating.

the_pm

09-13-2004, 09:34 AM

Here is a very un-pretty example to show you how it works. See if this helps you at all: http://www.plhmedia.com/ex/eagleknight/

eagleknight

09-13-2004, 10:13 AM

Thanks that helped.

gogocode

09-13-2004, 10:17 AM

Originally posted by eagleknight
Hmm this didn't work. When I use the div the bar on the left only starts to show up once something is put into the body. It is like it isn't repeating.

Yes, you would need to make the 'parent' div 100% high and set it to be overflow scroll, unfortunalty neither of those things work great x-browser. What I'd suggest is that you rework your ideas to merge the two background images into one.

Probably it would be better to put your top bakground into a div of it's own, make it absolute and 'under' the main body...

<head>
<style>
#head {
background-image: url(top.jpg); background-repeat: repeat-x;
position:absolute; z-index:1; height:100px; /* Height = Height of the top.jpg */
}

body {
background-image: url(left.jpg);
background-repeat: repeat-y;
}

#body {
position:relative;
z-index:2;
}
</style>
</head>

<body>
<div id="head"> </div>
<div id="body>......</div>
</body>