2 images to use as a background

[scsa20]

Hey all, I'm trying to get 2 images to be used as the background of my site but it's not going too hot. I've tried doing what http://www.w3.org/TR/css3-background/#layering said but it's just not showing up, here's what the code looks like (coping and pasting from the source on the actual page):


<!--
/* vBulletin 3 CSS For Style 'test' (styleid: 2) */
body
{
background: #FFFFFF;
color: #000000;
font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
margin: 5px 10px 10px 10px;
padding: 0px;
background-image: url(/images/test.gif), url(/images/test2.gif);
background-attachment: fixed, fixed;
background-repeat: no-repeat, no-repeat;
background-position: left bottom, top right;
}


looking at the code above you see what I've added to the Extra CSS Attributes for the body style.

So what am I doing wrong? Any help would be much appreciate.

[Freesteyelz]

I haven't tested this recently but the last I remember only Safari supports the layering background image effect.

[scsa20]

greeeeeeeaaaaaat.... does that mean that all the browsers current support CSS2 and Safari is the only one that supports CSS3?

[Freesteyelz]

Not all browsers support CSS2 but as for CSS3 I think so. You may, however, be able to use multiple <div> or <span> tags with each containing a background image with independent values. That'll be interesting.

[scsa20]

You may, however, be able to use multiple <div> or <span> tags with each containing a background image with independent values.

yea... I was thinking about it but hate to do it.... if I do go on and try it, does the div tag go between the header and the main table and then one at the end in the footer?

[Freesteyelz]

You may need to add the opening <div> or <span> tag(s) in the Header itself, above all HTML code.

[scsa20]

Thanks for the suggestions, I'll give it a try.

edit:

Ok, the way I did it is I added a new CSS entry:


.extrabg {
background-image: url(/images/test2.gif);
background-attachment: fixed;
background-position: top right;
background-repeat: no-repeat;
}


then, at the top of the header template, I've added:

<div class="extrabg">

then, at the end of the footer template, I've added:

</div>

that seems to work just fine.

[Freesteyelz]

Cool. :)