Creating Page Layouts with CSS - HTML, CSS, and Dynamic HTML - page 231

By default, browsers place the background image in the element's upper-left corner;
and then if the code specifi es tiling, the image is repeated from there. You can change
the initial position of a background image using the property

You can use negative
distances to move an
image to the left or up
from the top-left corner of
an element.

background-position: horizontal vertical ;
where horizontal is the horizontal position of the image and vertical is its vertical
position. The image's position is defi ned by: a) the distance from the top-left corner of
the element using one of the CSS units of length, b) the distance from the top-left corner
using a percentage of the element's width or height, or c) a keyword. Keyword options
are top , center , or bottom for vertical position, and left , center , or right for hori-
zontal placement. For example,

background-position: 10% 20%;
sets the initial position of the image 10% of the width to the right and 20% of the length
down from the upper-left corner of the element, while

background-position: right bottom;
places the background image at the lower-right corner of the element. If you include
only one position value, browsers apply that value to the horizontal position and verti-
cally center the image. Thus, the style

background-position: 30px;
places the background image 30 pixels to the right of the element's left border and cen-
ters it vertically.
By default, a background image moves along with the element content as a user
scrolls through the page. You can change this using the property

background-attachment: type ;
where type is scroll , fixed , or local . The default, scroll , scrolls the background
along with the document, while the fixed keyword fi xes the background in the browser
window, even as the user scrolls through the document. A fi xed background image can
be used to create a watermark effect, in which a subtle, often translucent graphic is dis-
played behind elements to mimic the watermarks found on some specialized stationery.
Finally, the local keyword is similar to scroll but is used for elements such as scroll
boxes to allow the element background to scroll along with the element content.

CSS3 Background Styles
CSS3 introduces several style properties for background images, most of which have now
gained popular acceptance among current browsers. The fi rst is the background-size
property, which sets the size of an element's background image. This property has
the syntax

background-size: width height ;
where width and height are the width and height of the image in one of the CSS units
of length or as a percentage of the element's width and height, or the keywords auto ,
cover , or contain . For example, the following style sets the size of the background
image to 300 pixels wide by 200 pixels high:

background-size: 300px 200px;
The auto keyword allows the browser to set the background image automatically
based on the size of the image in the image fi le. The style

background-size: auto 200px;
sets the height of the background image to 200 pixels and automatically sets the width to
retain the image proportions.