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
separately.
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.