css - CSS3 Backgrounds - multiple background-size properties

Question

I'm trying to do something maybe impossible, but lets see what do you think. Here is my code:

html {
    background: url(../img/pattern.png) repeat, url(../img/up2.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-color: black; 
}

So im trying to get the html element with multiple backgrounds for example 2 and the problem is that i want to set background-size only to the second background and not for the first one.. Any ideas?

Answer 1

You need to reset the size for the first image, then specify it for the second. The spec says that the initial value of background-size is auto, which means:

-webkit-background-size: auto, cover;
-moz-background-size: auto, cover;
-o-background-size: auto, cover;
background-size: auto, cover;