2 images in background possible?

adding 2 different images in body

[silverbytes]

Is adding 2 different image files in background possible in css?
One aligned to screen left, the other aligned to right, so if you have a fluid layout those will stick to left and right margins...

[your_store]

You'd need to have a container div for your entire page. That way the left image could be attached to the body element and the right image to your container div.

[Robin_reala]

Multiple background images on one element are currently in CSS3's working draft for background properties. Safari has support, although whether that's in a currently released version or not I'm not sure.

[dcrombie]

Safari has supported multiple-backgrounds since version 1.3 (current version is 2.0.1).

You might find a solution by applying one background to 'html' and the other to 'body'. I've used that trick on a couple of sites with no probs.

;)

[silverbytes]

I'd be happier if IE 5.x and above and firefox supports it (I don't see any single safari entry in my logs)
:)

[silverbytes]

This works in safari but as said nobody uses it...

div.test {
background-image: url(../pix/logo.gif), url(../pix/logo2.gif);
background-repeat: repeat-y;
background-position: top left, bottom right;
height: 200px;
border: 1px solid #000000;
}

In the meantime I'd appreciate if someone can post a brief code about how to make 2 images appear in background (IE, firefox)

I just can use 1 at time. Tried adding a <span with a style="background-image:url(bg.gif); background-position: top left; background-repeat:no-repeat;"> but doesn't work...

[Robin_reala]

html {
background-image: url(../pix/logo.gif);
background-repeat: repeat-y;
background-position: top left;
height: 200px;
border: 1px solid #000000;
}
body {
background-image: url(../pix/logo2.gif);
background-repeat: repeat-y;
background-position: bottom right;
height: 200px;
}

[silverbytes]

But that doesn't work in IE and firefox...
(or does it?)

[Robin_reala]

It should do. html and body are both styleable elements in Firefox and IE6 at least.

[silverbytes]

Tried that works. My image is 2500 px heigh (is a column enough tall to fit my heigh screen since content is not so long ever)

The problem: in pages where content is short (some 600 px height) the image doesn't show completely, seems like the BODY atribute background image just shows until the content ends, while the background image in HTML tag shows ok until bottom of screen.

Result a left side image ok and a right image background short.

I don't know what workaround may help now...