HTML and CSS Reference
In-Depth Information
background-repeat
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
background-attachment
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+.
background-position
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;
