Apply background-size to individual layer of a multiple background

问题

Just discovered multiple background. I would like to know how can you apply determined properties to only one of these backgrounds of your list of a multiple background. How can you target it individually?

Here is an example to illustrate:

body{
    background:
        url(images/small-group-bubbles.png) repeat-x fixed 10% 0,
        url(images/blur-bubble.png) repeat-x fixed -130% 0,
        url(images/big-bubble.png) repeat-x fixed 40% 0,
        url(images/green-gra-bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-color: #87d677;

As you can see there is a list of multiple backgrounds, but I would like to make one of these elements cover the whole screen with background-size. This code of course applies the cover property to all the images. I would like this cover property be applied only to the last picture: green-gra-bg/jpg.

How can I do this?

回答1:

I believe you can specify the size inline for each background url:

Here's the link: http://www.css3.info/preview/multiple-backgrounds/

so for example, use /cover below on your last url

body{
    background:
        url(images/small-group-bubbles.png) repeat-x fixed 10% 0,
        url(images/blur-bubble.png) repeat-x fixed -130% 0,
        url(images/big-bubble.png) repeat-x fixed 40% 0,
        url(images/green-gra-bg.jpg) no-repeat center/cover fixed;
    background-color: #87d677;
}

for my own personal example I tested an example i found:
http://www.netmagazine.com/tutorials/get-grips-css3-multiple-background-images

body {
    background: 
        url(imgs/cloud.png) top center/800px no-repeat, 
        url(imgs/clouds-scatter.png) -46% -330px/500px repeat-x, 
        url(imgs/hills.png) bottom center repeat-x, 
        url(imgs/peaks.png) bottom right repeat-x;
}

The 800px and 500px sizes I add appear to be affecting each layer independent from one another.

来源：https://stackoverflow.com/questions/16194737/apply-background-size-to-individual-layer-of-a-multiple-background

标签

css3

background-image