HTML and CSS Reference
In-Depth Information
Examples
body {background-image: url(plaidpattern.gif);}
p {background-image: none;}
#robot {background-image: url(http://www.democompany.com/images/robot.gif);}
Compatibility
CSS 1, 2, 3 IE 4+
Netscape 4 (buggy; may not fit
entire region), 6+, Firefox 1+
Opera 4+, Safari 1+
Notes
• Under the emerging CSS3 specification, it is possible to specify background images
and separate each with a comma. For example,
body {background-image: url(donkey.gif), url(elephant.gif);}
However, without positioning of the backgrounds or transparency, you may
obscure images. Support is limited, though Safari 1.3+ browsers support most CSS3
background-image
features.
background-position
This property determines how a background image is positioned within the canvas space
used by its associated element. The position of the background image's upper-left corner
can be specified as an absolute distance, typically in pixels, from the surrounding element's
origin. It can also be specified as a relative unit, nearly always a percentage, along the
horizontal and vertical dimensions. Finally, the position can be specified as named values
that describe the horizontal and vertical dimensions. The named values for the horizontal
axis are
center
,
left
, and
right
; those for the vertical axis are
top
,
center
, and
bottom
.
The default value for an unspecified dimension when only a single value is given is
assumed to be
center
.
Syntax
background-position: horizontal vertical
where
horizontal
is
percentage
|
length
| left | center | right
and
vertical
is
percentage
|
length
| top | center | bottom
Examples
body {background-image: url(plaidpattern.gif);
background-position: 50px 100px;}
#div1 {background-image: url(bricks.png); background-position: 10% 45%;}
body {background-image: url(logo.gif); background-position: top center;}
