Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Multiple Backgrounds
In CSS3, you can set multiple backgrounds on elements, which is wonderful news—it completely does away with the meddlesome practice of having to having multiple wrapper <div>s so you can hang multiple images off them. Now you simply separate the different background declarations using commas. For example:
background: url(rose.png) top right no-repeat, url(clouds.jpg);
You can also set what amount of the background each image takes, using the background-size property—you can set a separate background size for each image, or use the same single value for all of them:
background-size: 25% 50%, 50% 100%;
The two properties above give us the look shown in Figure 7.
)
Figure 7 Using multiple background images on the same box.
The one strange thing, at least to my mind, is that images that appear later in the property value appear behind earlier ones, so you need to be mindful of this issue—it seems a bit counter-intuitive to me.
And, of course, because gradients are images, you can put multiple gradients on the same element, or a combination of gradients and background images. Have a play and see!