Difference between revisions of "CSS GUIDE BACKGROUND POSITION"
(→Usage Examples) |
(→Summary) |
||
| (7 intermediate revisions by the same user not shown) | |||
| Line 2: | Line 2: | ||
== Summary == | == Summary == | ||
Use the background-position property to specify where a background image is placed. If the image repeats (horizontally, vertically or both) then it repeats from this location. If there is a single image, it is placed using the background-position property. | Use the background-position property to specify where a background image is placed. If the image repeats (horizontally, vertically or both) then it repeats from this location. If there is a single image, it is placed using the background-position property. | ||
| + | |||
| + | * Initial value: 0% 0% | ||
| + | * Applies to: all elements | ||
| + | * Inherited: no | ||
| + | * Percentages: refer to the size of the box itself | ||
| + | * <b>[http://www.w3.org/TR/CSS21/media.html#visual-media-group Media Group:]</b> Visual | ||
| + | * Computed value: for <length> the absolute value, otherwise a percentage | ||
== Syntax == | == Syntax == | ||
| Line 7: | Line 14: | ||
== Legal Values == | == Legal Values == | ||
| + | ; <percentage> <percentage>: With a value pair of '0% 0%', the upper left corner of the image is aligned with the upper left corner of the box's padding edge. A value pair of '100% 100%' places the lower right corner of the image in the lower right corner of padding area. With a value pair of '14% 84%', the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the padding area. | ||
| + | ; <length> <length>: With a value pair of '2cm 1cm', the upper left corner of the image is placed 2cm to the right and 1cm below the upper left corner of the padding area. | ||
| + | ;top left and left top: Same as '0% 0%'. | ||
| + | ;top, top center, and center top: Same as '50% 0%'. | ||
| + | ;right top and top right:Same as '100% 0%'. | ||
| + | ;left, left center, and center left:Same as '0% 50%'. | ||
| + | ;center and center center:Same as '50% 50%'. | ||
| + | ;right, right center, and center right:Same as '100% 50%'. | ||
| + | ;bottom left and left bottom:Same as '0% 100%'. | ||
| + | ;bottom, bottom center, and center bottom:Same as '50% 100%'. | ||
| + | ;bottom right and right bottom:Same as '100% 100%'. | ||
| + | |||
| + | If only one value is specified, then it sets the horizontal position, with the vertical position at 50%. Otherwise, the first value specifies the horizontal position. Combinations are allowed of keyword, length, or percentage values, but if keywords are mixed with other values, 'left' and 'right' may only be used as the first value, and 'top' and 'bottom' may only be used as the second value. Negative positions are allowed. | ||
== Mozilla Recommended Values == | == Mozilla Recommended Values == | ||
== Usage Examples == | == Usage Examples == | ||
| − | <pre>background-position: bottom right; | + | <pre>background-position: bottom right; |
| − | + | ||
| − | + | background-position: top right; | |
| − | + | ||
| − | + | background-position: 20px 50px; | |
| − | + | ||
| − | + | background-position: 50% 20%; | |
| + | |||
| + | background-position: right 50%; | ||
| + | |||
| + | background-position: 20% 50px; | ||
| + | |||
| + | background-position: right 20px; | ||
| + | </pre> | ||
== Notes == | == Notes == | ||
== Specification Conformance == | == Specification Conformance == | ||
| + | |||
| + | * [http://www.w3.org/TR/CSS1#background-position CSS 1] | ||
| + | * [http://www.w3.org/TR/CSS21/colors.html#propdef-background-position CSS 2.1] | ||
| + | * [http://www.w3.org/TR/2005/WD-css3-background-20050216/#background-position CSS 3] | ||
== Browser Compatibility == | == Browser Compatibility == | ||
| + | |||
| + | <table class="standard-table"> | ||
| + | <tr> | ||
| + | <th>Browser</th> | ||
| + | <th>Lowest Version</th> | ||
| + | </tr> | ||
| + | <tr> | ||
| + | <td>Internet Explorer</td> | ||
| + | <td>4</td> | ||
| + | </tr> | ||
| + | <tr> | ||
| + | <td>Firefox</td> | ||
| + | <td>1</td> | ||
| + | </tr> | ||
| + | <tr> | ||
| + | <td>Netscape</td> | ||
| + | <td>6</td> | ||
| + | </tr> | ||
| + | <tr> | ||
| + | <td>Opera</td> | ||
| + | <td>3.5</td> | ||
| + | </tr> | ||
| + | </table> | ||
== See Also == | == See Also == | ||
Latest revision as of 19:18, 1 December 2006
This document is a work in progress and is subject to change.
Contents
Summary
Use the background-position property to specify where a background image is placed. If the image repeats (horizontally, vertically or both) then it repeats from this location. If there is a single image, it is placed using the background-position property.
- Initial value: 0% 0%
- Applies to: all elements
- Inherited: no
- Percentages: refer to the size of the box itself
- Media Group: Visual
- Computed value: for <length> the absolute value, otherwise a percentage
Syntax
background-position: [left | right] [N% | Npx] [N% | Npx] [top | bottom];
Legal Values
- <percentage> <percentage>
- With a value pair of '0% 0%', the upper left corner of the image is aligned with the upper left corner of the box's padding edge. A value pair of '100% 100%' places the lower right corner of the image in the lower right corner of padding area. With a value pair of '14% 84%', the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the padding area.
- <length> <length>
- With a value pair of '2cm 1cm', the upper left corner of the image is placed 2cm to the right and 1cm below the upper left corner of the padding area.
- top left and left top
- Same as '0% 0%'.
- top, top center, and center top
- Same as '50% 0%'.
- right top and top right
- Same as '100% 0%'.
- left, left center, and center left
- Same as '0% 50%'.
- center and center center
- Same as '50% 50%'.
- right, right center, and center right
- Same as '100% 50%'.
- bottom left and left bottom
- Same as '0% 100%'.
- bottom, bottom center, and center bottom
- Same as '50% 100%'.
- bottom right and right bottom
- Same as '100% 100%'.
If only one value is specified, then it sets the horizontal position, with the vertical position at 50%. Otherwise, the first value specifies the horizontal position. Combinations are allowed of keyword, length, or percentage values, but if keywords are mixed with other values, 'left' and 'right' may only be used as the first value, and 'top' and 'bottom' may only be used as the second value. Negative positions are allowed.
Mozilla Recommended Values
Usage Examples
background-position: bottom right; background-position: top right; background-position: 20px 50px; background-position: 50% 20%; background-position: right 50%; background-position: 20% 50px; background-position: right 20px;
Notes
Specification Conformance
Browser Compatibility
| Browser | Lowest Version |
|---|---|
| Internet Explorer | 4 |
| Firefox | 1 |
| Netscape | 6 |
| Opera | 3.5 |
