Now that Safari announced there support of CSS3's multiple backgrounds developers can have a taste of the future. In this article I will describe how multiple backgrounds work, how you can profit from them and how to do the fix for browsers who don't support it.
An example
If you have Safari (1.3 or 2.0) you will see a red box with rounded orange corners. If you don't have Safari you will just see a red box.
This is what it should look like:
The down sides
Before I show you the CSS I must fist tell you that this does not validate (yet) in the W3C validator. This is because the CSS3 standard is not yet finished 100%.
Also the support for it is very small (Only Safari), but I'm sure that it won't take long before Firefox also implements it. And well, its will probably take very long before IE supports it. Probably version 8 as the IE team said that they will not implement something that is not 100% finished.
The basics
Before you start on this you must have a basic understanding of CSS.
To add multiple backgrounds all you need to do is add a background like you used to, then add a comma and start again:
div {
background-image: url(image1.jpg), url(image2.jpg);
}Now because you have not defined where the image is you will only see image1 because the image defined first will go over the image defined after that.
If you want to define the position and repeat you must do it in the same way as the way you did it before. This time the first thing you define will count for the first image you put in and the second thing you define will count for the second and so on and so on.
div {
background-image: url(image1.jpg), url(image2.jpg);
background-position: top left, bottom right;
background-repeat: no-repeat, repeat-y;
}Of course you can always add more than 2 eg.
div {
background-image:
url(image1.jpg), url(image2.jpg), url(image3.jpg);
}Using this method you can make boxes with rounded edges that resize perfectly:
div {
/* I'm adding this line of code so that browsers who do
not support the multiple backgrounds still get something like it,
or in this case get the same color as the background */
background: url(images/middle.gif);
color: white;
padding: 12px;
background-image:
url(images/bottomleft.gif), url(images/bottomright.gif),
url(images/topleft.gif), url(images/topright.gif),
url(images/top.gif), url(images/bottom.gif),
url(images/left.gif), url(images/right.gif),
url(images/middle.gif);
background-position:
bottom left, bottom right, top left, top right, top left,
bottom right, top left, top right, bottom left;
background-repeat:
no-repeat, no-repeat, no-repeat, no-repeat, repeat-x,
repeat-x, repeat-y, repeat-y, repeat;
}
You will get some thing looking like this box.
Or like this.
All with the same CSS
Extras
the CSS3 Backgrounds and Borders Module
Surfing Safari Blog
Chris Clack's test page
Dan Bedford's test page
amonre's test page
James Nash's test page
So now you know how its done, be creative! Show me what you've done.