background-position

Support Key: [CSS1|CSS2] [IE4B2|N6|O3.5]
 Other Color/Background Properties
color
layer-background-color
layer-background-color
background
background-color
 background-image
background-repeat
background-attachment
background-position-x
background-position-y
= Index DOT Css by Brian Wilson =
  Main Index | Property Index | CSS Support History | Browser History  


   Quick Statistics   
Default Value:
0% 0%
Applicable Elements:
Block-level and Replaced Elements
Inherit From Parent:
No
Applicable Media:
Visual
HTML Equivalent:
NA
What is it?
If a 'background-image' is specified, this complex parameter details the initial position of the background image specified in the browser window if it is not continuously tiled in the display area. The values for this property translate to space separated X/Y coordinates of the browser window. Minimum values are at the upper-left corner of the display area and maximum values are at the lower-right corner. These values are normally represented as a pair, but omitting a value is legal - the missing value is assumed to be the y-axis coordinate and is set to the default 'center' value.

Allowed Values
inherit
[CSS2] [N6|O4]
Type: Explicit
Description:
Explicitly sets the value of this property to that of the parent.
X% Y%
[CSS1|CSS2] [IE4B1|N6|O3.5]
Type: Calculated
Description:
Percentage is in reference to the dimensions of the box of the current element. Values specify the percentages on BOTH the image and the canvas and may be negative (eg: 20% 75% indicates the reference point 20% from the left side of the image, 75% from the top of the image is to be located at 20% from the left side of the element's rendering box and 75% from the top of the rendering box.)
X Y
[CSS1|CSS2] [IE4B1|N6|O3.5]
Type: Calculated
Description:
Represents absolute coordinate position of the image and may be negative. Standard Absolute or Relative Length Units may be used here.
[(left|center|right) (top|center|bottom)]
[CSS1|CSS2] [IE4B1|N6|O3.5]
Type: Explicit
Description:
Keywords representing screen positions. Left keyword is the X-position and the right keyword is the Y-position for the image.
Example
Ext/Doc: body { background-image: url(http://www.foo.com/image.gif);
background-position: center top }
In-Line:  <body STYLE="background-image: url(http://www.foo.com/image.gif);
background-position: center top">text</body>
Notes Browser Peculiarities

Boring Copyright Stuff....