HTML and CSS Reference
In-Depth Information
If the image is larger than the containing element, it is clipped to the
area occupied by the element. If the image is smaller, it is repeated to
tile the area occupied by the element, as dictated by the value of the
background-repeat
attribute.
You control the starting position of the image within the element with
the
background-position
property. The
background-attachment
property
manages the scrolling behavior of the image.
While it may seem that a background color and a background image
are mutually exclusive, you should usually define a background color
even if you are using a background image. That way, if the image is
unavailablefor example, when the user doesn't automatically download
imagesthe browser displays the background color instead. In addition,
if the background image has transparent areas, the background color is
used to fill in those areas.
8.4.5.3. The background-attachment property
If you specify a background image for an element, use the
background-
attachment
property to control how that image is attached to the
browser's display window. With the default value
scroll
, the browser
moves the background image with the element as the user scrolls
through the document. A value of
fixed
prevents the image from mov-
ing.
8.4.5.4. The background-position property
By default, the styles-conscious browser begins rendering a background
image starting in the upper-left corner of the allotted display area. With
the
background-position
property, you can offset the starting position of
the background image by an absolute (length) or relative (percentage
or keyword) offset. The resulting, potentially "cropped," image fills the
area from that offset starting point.
