Multiple Bankground images in CSS

[ianmh]

I have tried to find an answer to this, but to no avail. I want a background image at the top repeated horizontally and have achieved this with no problems in the body tag. But now I want to add another background image to repeat at the bottom to one of my class styles.

.bottom {
position: absolute;
left:0;
bottom: 0px;
width: 100%;
background-image: url(../images/bottom_tile.gif) repeat-x;
}

This is what I have. Is what I want to do possible with CSS? I could do this with tables, but I am trying to make a tableless site.

[leoo24]

you can't apply to different background images to the same element, but you can to separate elements. You could have an empty div lying at the bottom with the bottom background, set it's z-index to send it behind any other content.

so the answer is yes, do you have some code or a url?

[ianmh]

I don't have it up yet, but I tried something like this.

Style

.bottomBackground
{
background-image: url(../images/bottom_tile.gif) repeat-x;
}


and then in the page

<div class="bottomBackground"></div>


I've tried several variations also.

[scoutt]

so why didn't that work?

[ianmh]

I'm not sure, tried it in a blank html file and it still doesn't work. Also fixed the fact that I didn't quote the image. Hmmmm. Do I need a particular doc-type maybe? I am having issues with my doc-type so I removed it for now.

[leoo24]

try giving the div some dimensions, height and width.

[ianmh]

Got it working doing this.


#bottomBackground
{
background: url(../images/bottom_tile.gif) bottom left repeat-x;
position: absolute;
top: 0px;
width: 100%;
height: 100%;
}


The csszengarden was a great help.

http://csszengarden.com

[leoo24]

didn't it work just adding dimensions to it?

[scoutt]

Originally posted by ianmh
Got it working doing this.


#bottomBackground
{
background: url(../images/bottom_tile.gif) bottom left repeat-x;
position: absolute;
top: 0px;
width: 100%;
height: 100%;
}


The csszengarden was a great help.

http://csszengarden.com
you loaded it bottom left then top: 0 ???

[leoo24]

i see what he did now, that div is 100% and positioned top while the background is postioned bottom. Well that's one way to do it.

[ianmh]

To be honest I fiddled with it for awhile and this is what worked. I was looking at the csszengarden site, and that's where I got the original idea. I have used CSS for a long time, but this is my first time trying to make a tableless site, and CSS seems a lot more picky when doing this.

[scoutt]

Originally posted by ianmh
and CSS seems a lot more picky when doing this.
it isn't the css, it is the browser. you have to have one that supports it. IE doesn't so make sure you check in there too. also depends on what doctype you are using.

[ianmh]

I've tested it in IE and it looks fine. I haven't picked a doc-type yet, I wanted to use XHTML, but my menu created in Sothink stopped working with that doc-type. When I put an older doc-type, my Sothink menu works but some of my CSS breaks, so I'm kind of in a pickle.

Is there a better way to do what I'm trying to do? I basically need a 1 pixel wide 5 pixel high tiled graphic at the bottom of the page, and I don't want to use tables.

[ianmh]

btw scoutt or anyone else, what do you think of Sothink? I hate using generated code, but I need a really nice menu.

[scoutt]

then just use html4.01 transitional.

that is as old as you want to get.

[ianmh]

That one breaks my CSS though. :(

[scoutt]

never heard of them. I use Coolmenus from www.dhtmlcentral.com

[ianmh]

Cool thanks, I forgot about this guys site.

[scoutt]

Originally posted by ianmh
That one breaks my CSS though. :(
in the menu or the one you did here?

actually either one shouldn't have done anything. that doctype shouldn't break anything.

[ianmh]

Not sure what is breaking as the menu was generated with sothink software. Think I'm going to re-write the menu manually.