setting two background in css

I have a problem wth setting two background, here it is:

rightCol {
    margin: 0pt;
    padding: 20px;
    background: #AF7A38 url('../images/stain2.png') no-repeat scroll right top;
    -moz-background-clip: border;
    -moz-background-origin: padding;
    -moz-background开发者_运维问答-inline-policy: continuous;
    float: right;
    width: 770px;
    min-height: 810px;
    height: auto ! important;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px; behavior: url(PIE.htc);
}

As you see it sets the background right top with some width and height with #AF7A38 color background for the rest of column, but what I want to do is to set another background instead of color for example setting this:

background: url('../images/background2.jpg') repeat scroll 0% 0%;

to fill the rest of column instead of color.

thanks

---

As far as I know, you can only use one background per element. CSS3 changes this, however, so if CSS3 is an option I would go that route. Check it out here.

---

To use two background images, place the backgrounds in two elements. You can use the html and body elements for this if you want them behind the entire page, or add an empty positioned secondary element to place them behind a sub-element.