Show 2 background images on left and right

Possible?

[silverbytes]

I need to show 2 background images (is a background for a column on left, and need other on righ)
Imagine a 3 columns layout. Left column needs a background image.
Right column too.
Design is fluid, but columns are 124 px width.

I have this in my css file:

HTML {
background-image:url(photos/mypic-bg.gif); 
background-position: top left; 
background-repeat:no-repeat;
}

That puts the image as background on left col.
Now, how do I put the other?
I'm looking for a solution that works for IE and Firefox.

[Birdman]

I would apply the backgrounds to the columns' container elements, rather than try to display multiple background images [quirksmode.org] on one element.

Try using ids for each column:

#left{
background: url('/path/to/left/pic/') no-repeat;
width: 124px;
}
#right{
background: url('/path/to/right/pic/') no-repeat;
width: 124px;
}

Then, in your column elements(<td>, <div>, etc.), use the id:

<td id="left>
Left column content
</td>

..and the same for the right..

Hope it helps out.

[Span]

Yes, it is possible to do this:

html {
background:rgb(51,51,51) url(image.jpg) no-repeat fixed right top;
}
body {
background:transparent url(other_image.jpg) no-repeat fixed left top;
}

IE5 doesn't support background images on HTML, but it works in every other modern browser.

[silverbytes]

None of these worked for me

The body solution: shows the image of 2500 px height incomplete. for an unknown reason just disappears at some point leaving a big white margin (it shows half of picture's height aprox) seems like a conflict with this

#leftcontent {
LEFT: 10px;
WIDTH: 124px;
POSITION: absolute;
TOP: 100px;
margin: 0 10 0 0;
overflow: visible;
}

The div idea: my layer has adsense ads, can't set it's height to a fixed pixels amount and the image must not start just on layer's top.