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?

BoltClock · Accepted Answer · 2013-06-04 14:03:25Z

9

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;

answered Jun 4, 2013 at 14:03

BoltClock

728k165 gold badges1.4k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS3 Backgrounds - multiple background-size properties

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related