The property of multiple backgrounds in CSS3 is very powerful and can be used for a variety of purposes in web development and programming. But still many people using CSS3 do not make the right use of this feature. Initially, this feature existed only in Safari but eventually all the updated browsers were equipped with this support. To add multiple backgrounds in your page, you need to go through the simple process of adding a background and after that, add this piece of code after a comma:
1 2 3 |
div { background-image: url(image1.jpg), url(image2.jpg); } |
But another important thing is to define the location of the background image without which it might not work properly. Defining the position of the image is done in, more or less, the ordinary way. For multiple backgrounds, all you need to do is to repeat the process.
1 2 3 4 5 |
div { background-image: url(image1.jpg), url(image2.jpg); background-position: top left, bottom right; background-repeat: no-repeat, repeat-y; } |
Adding more than two images can also be performed in an easier way:
1 2 3 4 |
div { background-image: url(image1.jpg), url(image2.jpg), url(image3.jpg); } |
The following code would comprehensively add multiple images in the background and would also make boxes with rounded edges that resize perfectly well:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
div { 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; } |
This completes the attainment of the multiple backgrounds. The process is quite simple and straightforward and for anyone having prior knowledge of CSS3, this can be performed within a few minutes.