In the working draft of the css3 module ‘background’, the css3 gives the possibility to apply more background images to a single element and not just the single one as specified in the css2 property background.
The css rules to apply multiple background image to an element are simple.
As for the css2, we specify an url for each images to use as background and their position separated by a comma.
An example of css rule to apply the multiple images background in css3:
#multiple_background{
background:url(background1.jpg) no-repeat top right, url(background2.jpg) repeat-x bottom;
}
Next, the test I done to create a banner using 6 images applied to an element 400px wide, 150px high and with a 2px gray border.
Here is an image preview of the result obtained with Safari3.1:
: ucello.jpg (bird) positioned at 30px of the left border and 0px of the top border
: lumaca.jpg (snail) positioned at 0px of the right border and 105px of the top border
: logo.jpg positioned at 60px of the right border and 55px of the top border
: fiore.jpg (flower) positioned at 5px of the left border and 55px of the top border
: erba.jpg (grass) repeated horizontally (repeat-x) along the bottom part of the element
: cielo.jpg (sky) repeated horizontally (repeat-x) along the top part of the element
The css rules:
NB: the order in which is written the url to the images is important.
The first background image applied will be the one on top level and above all the others.
For example, the bird (the first background image) will be above all the others, while the sky (last background image listed) will be underneath all the other ones.
This method allows us to create a background on more levels and keeping them organized.
#multiple_background{
width:400px;
height:150px;
border:2px solid #CCC;
background:
url(ucello.jpg) no-repeat 30px top,
url(lumaca.jpg) no-repeat right 105px,
url(logo.jpg) no-repeat 60px 55px,
url(fiore.jpg) no-repeat 5px 55px,
url(erba.jpg) repeat-x bottom,
url(cielo.jpg) repeat-x top;
}
Here is a preview image of the result obtained with Safari3.1:
The result online:
NB: the css3 property is at the moment only supported by Safari, with any other browser only the surrounding gray border will be visible.
{ 0 comments… add one now }