setting two background in css

Question

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

Answer 1

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 .

Answer 2

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 .