HTML and CSS Reference
In-Depth Information
Compatibility
CSS 1, 2, 3
IE 4+
Netscape 6+, Firefox 1+
Opera 4+, Safari 1+
Notes
• According to the CSS 2.1 specification, the tiling and positioning of background
images on inline elements is undefined. In practice, browsers tend to support it.
• When keywords are solely used, the ordering of values is not important.
• Under CSS3 you may specify multiple
background-position
values and separate
them with commas. Each value will then be applied to the corresponding background
in the list of backgrounds. For example,
background-position: 50px 100px,
200px 200px;
would position the first background at 50px, 100px and the second
background at 200px, 200px. Support is limited, though Safari 1.3+ browsers support
most CSS3
background-position
features.
background-repeat
This property determines how background images specified by the property
background
or
background-image
tile when they are smaller than the canvas space used by their
associated elements. Possible values are
repeat
(repeats in both direction),
repeat-x
(repeats only horizontally),
repeat-y
(repeats vertically), and
no-repeat
. The default
value is
repeat
.
Syntax
background-repeat: repeat | repeat-x | repeat-y | no-repeat | inherit
Examples
body {background-image: url(yellowpattern.gif) background-repeat: repeat;}
#div1 {background-image: url(tile.gif); background-repeat: repeat-x;}
p {background-image: url(tile2.jpg); background-repeat: repeat-y;}
.mark {background-image: url(logo.png); background-repeat: no-repeat;}
Compatibility
CSS 1, 2, 3 IE 4+ Netscape 4 (buggy; may not fit
entire region), 6+, Firefox 1+
Opera 4+, Safari 1+
Notes
• According to the CSS 2.1 specification, the tiling and positioning of background
images on inline elements is undefined. In practice, browsers tend to support it.
• Under CSS3 you may specify multiple
background-repeat
values and separate
them with commas. Each value will then be applied to the corresponding background
in the list of backgrounds. For example,
background-repeat: no-repeat,
repeat-x;
would apply
no-repeat
to the first background and
repeat-x
to the
second. Support is limited, though Safari 1.3+ browsers support most CSS3
background
-related features.