HTML and CSS Reference
By default, the background image repeats itself both horizontally and vertically. It can
be changed with the background-repeat property to make the background repeat only
horizontally ( repeat-x ), only vertically ( repeat-y ), or not at all ( no-repeat ).
background-repeat : repeat | repeat-x | repeat-y | no-repeat
When the viewport is scrolled in a browser, a background image normally follows along
with the rest of the page. This behavior is determined by the background-attachment
property, whose initial value is scroll . If the value is set to fixed , the position of the
background is instead relative to the viewport, making the background stay in place even
as the page is scrolled.
background-attachment : scroll | fixed | local
CSS 3 introduced a third value for this property, local , which fixes the background
relative to the element's content instead of the whole viewport. With this value, the
background scrolls along with the element's content only when that element is scrolled
(achieved by using the overflow property). Support for this value was introduced in
Chrome 4+, Firefox 25+, IE9+, Safari 5+, and Opera 10.5+.
The background-position property is used to position a background image, with one
value for vertical placement and another for horizontal. They can both be set to a length
or a percentage of the element's size, and negative values are allowed. There are also
some predefined values for this property, including: top , center , and bottom for vertical
placement; and left , center , and right for horizontal placement.
background-position : <length> <length> | <percentage> <percentage> |
top/center/bottom + left/center/right
By default, a background image is positioned to the top left of its parent element's
padding area. Any length values given move the background image relative to these
edges. For example, the following property offsets the background 5 pixels down and
10 pixels to the right:
background-position: 5px 10px;