HTML and CSS Reference
In-Depth Information
CSS3 provides an expanded form of the background property that includes values for
image size, origin, and the location of the clipping box
The different background
properties can be listed in
any order, but you should
be consistent in your
ordering to make your
code easier to edit and
easier for others to read.
background: color url( url ) position / size repeat attachment box box ;
where size and box box are values corresponding to background-size ,
background-origin , and background-clip properties, respectively. If only one box
value is present, browsers set both the background-origin and background-clip
properties to that value. At the moment, few browsers support the expanded form; there-
fore, you only should use the brief form and set the size, origin, and clipping box values
Multiple Image Backgrounds
There is no reason to limit your background to a single image. CSS allows you to specify
multiple images and their properties in a comma-separated list. The general syntax is
background-property : value1 , value2 , … ;
where background-property is one of the CSS background image properties and
value1 , value2 , etc. are values for each image associated with that property. For exam-
ple, the following style rule creates two background images for the header element; one
is located in the top-left corner, the other is located in the bottom-right corner, and both
are superimposed on a yellow background:
header {
background-color: yellow;
background-image: url(logo.png), url(logo2.png);
background-position: top left, bottom right;
background-repeat: no-repeat;
Notice that if a value is listed just once, it is applied to all images in the list. Thus, nei-
ther the logo.png image nor the logo2.png image is tiled in the example above. Multiple
backgrounds also can be applied using the background shorthand property as follows:
header {
background: url(logo.png) top left no-repeat,
url(logo2.png) bottom right no-repeat yellow;
When browsers render an element with multiple backgrounds, the images that are
listed last are the fi rst ones loaded. If images overlap, the fi rst images listed appear on top
of subsequent images.
With multiple back-
grounds, specify the
background color last so
that your background
images are loaded on top
of it. You can specify only
one background color.
Search WWH ::

Custom Search