Difference between revisions of "CSS GUIDE BACKGROUND POSITION"

From CDOT Wiki
Jump to: navigation, search
(Usage Examples)
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
 +
* Media: [[CSS:Media:Visual|visual]]
 +
* Computed value: for <length> the absolute value, otherwise a percentage
  
 
== Syntax ==
 
== Syntax ==
Line 22: Line 29:
  
 
== 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 ==
  
 
== See Also ==
 
== See Also ==

Revision as of 20:05, 1 December 2006

This document is a work in progress and is subject to change.

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: visual
  • Computed value: for <length> the absolute value, otherwise a percentage

Syntax

 background-position: [left | right] [N% | Npx] [N% | Npx] [top | bottom]; 

Legal Values

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

See Also