HTML and CSS Reference
In-Depth Information
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
position.
• 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
create now.
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 */
body {
background: black url(bike_bg.png) top left no-repeat;
}
