CSS background: trouble

[Antivirus]

Having trouble getting two different images into a custom CSS declaration. I have the following:

/* ***** ERC styling for art headings ***** */
.ercarthead { 
background: #333333 url(images/gradients/erc_bighead_gradient.gif) repeat-x top left; 
color: #FFFFFF; 
font: bold 32px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; 
text-transform: uppercase; 
padding: 0px 0px 1px 4px; }

which works nicely and shows my gradient, however I am looking to place another image in the same background declaration like this (but it fails to show)...

/* ***** ERC styling for art headings ***** */
.ercarthead { 
background: #333333 url(images/gradients/erc_bighead_gradient.gif) repeat-x top left, url(images/gradients/erc_subhead_o.gif) no-repeat top right; 
color: #FFFFFF; 
font: bold 32px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; 
text-transform: uppercase; 
padding: 0px 0px 1px 4px; }

what am i doing wrong? hopefully someone out there can tell me?

[Behemoth]

You can't do that.

What exactly was it you were trying to do? I may be able to help you.

[Antivirus]

I am trying to get the second image to display above the repeating first image. Each image works correctly on it's own, but when trying to use both at same time, onle 1 works, the other does not.

[Princeton]

as stated, you can't do that...
you could nest divs (if you are using divs)
or add a background image to <tr> and another to <td> if you are using tables

[Antivirus]

Figured out how to do it- had to keep the repeating gradient within the .ercarthead css, then within the html, I used "float" on the image i wanted to have on the right:

      <td class="ercarthead" width="489">
      <div style="float:right;"><img src="$vboptions[bburl]/images/gradients/erc_subhead_o.gif" border="0" /></div>
      $content
      </td>

[Behemoth]

Originally Posted by Antivirus

Figured out how to do it- had to keep the repeating gradient within the .ercarthead css, then within the html, I used "float" on the image i wanted to have on the right:

      <td class="ercarthead" width="489">
      <div style="float:right;"><img src="$vboptions[bburl]/images/gradients/erc_subhead_o.gif" border="0" /></div>
      $content
      </td>

Oh, that's what you were trying to do. I thought you meant overlaying two different backgrounds over one another, which is impossible without using layers.