HTML and CSS Reference
In-Depth Information
background-repeat
,
background-attachment
,
background-position
) in
the same place.
background:
rgba(45,45,45,0.5);
/* transparent dark gray
color */
background:
#fff url(background.jpg) no-repeat
; /* top left
aligned nonrepeating background image against white */
background:
url(circle.png) repeat-y center center
; /* image
placed in the center of the container then tiled
vertically up and down */
note
Like other shorthand properties, when individual properties are left
out of the shorthand
background
property, they are set to their initial
values. Therefore,
background:
rgba(45,45,45,0.5)
as in the first example in
the previous code would remove any previously defined background images.
Use
background-color
to set color while leaving other properties alone.
CSS3 defines a way to apply multiple background images to a single
element. Supported by Firefox 3.6+, IE 9 Preview, Safari, and WebKit mobile,
it may not be ready for use on many projects but may be useful in some
situations such as targeting Apple devices. Multiple background images
are assigned with comma-separated values for the
background-image
property (with the earliest image appearing closest to the user). After
doing so, the other background image-related properties take matching
comma-separated values or a single value applying to all images.
background-image: url(top.png), url(bottom.png),
➥
url(middle.png);
background-repeat: no-repeat, no-repeat, repeat-y;
background-position: center top, center bottom, center center;
The previous code would set up nonrepeating top and bottom images
with a tiled image the height of the element beneath them.
