HTML and CSS Reference
Formatting the Background
• To display a background image, use
background-image: url( url );
where url is the filename and location of the image file.
• To set how a background image repeats, use
background-repeat: type ;
where type is repeat , no-repeat , repeat-x , repeat-y , round , or space .
• To set the position of a background image, use
background-position: horizontal vertical ;
where horizontal is the horizontal position of the image and vertical is its vertical
• To set the attachment of an image to the background, use
background-attachment: type ;
where type is scroll , fixed , or local .
• To set the size of a background image, use
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 .
• To clip a background, use
background-clip: box ;
where box is content-box , padding-box , or border-box (the default).
• To specify the origin of a background image, use
background-origin: box ;
where box is content-box , padding-box (the default), or border-box .
Adding a Page Background
You're now ready to create a background for the Cycle Pathology home page. Dan has a
graphic image of a cyclist standing before a sunset. He wants you to place this image in
the top-left corner of the page body against a black background. He does not want you
to tile the image.
You'll place a style rule for the page background in a new style sheet fi le that you'll
To format the page background:
1. Open the cp_stylestxt.css file in your text editor. Type your name and the date in
the comment section at the top of the file, and then save the file as cp_styles.css .
2. Below the comment section, insert the following style rule (see Figure 4-10):
/* Styles for the Page Body */
background: black url(bike_bg.png) top left no-repeat;