background-position

Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
Short information
CSS CSS1
Default value 0% 0%
Inherited No
Applied To block and replacable elements
HTML analog No
Reference to specification http://www.w3.org/TR/CSS21/colors.html#propdef-background-position
Description
It specifies initial background image location installed with the help of parameter “background-image”.

Syntax

background-position: [percent | destination] | [left | center | right] || [top | center | bottom]
Arguments
This parameter has 2 values: horizontal location (“left”, “center”, “right”) and vertical one (“top”, “center”, “bottom”). Location may be specified in percents, pixels and other units in addition to using the keywords. If keywords are used, their order does not matter. In this case of percent record the horizontal location is defined at first and only than the vertical one after the spacing. There is relation between main used keywords and percent record is the following::
top left = left top = 0% 0% (in the left top corner)
top = top center = center top = 50% 0% (in the top middle)
right top = top right = 100% 0% (in the right top corner)
left = left center = center left = 0% 50% (in the left margin and in the middle)
center = center center = 50% 50% (in the middle)
right = right center = center right = 100% 50% (in the right margin and in the middle)
bottom left = left bottom = 0% 100% (in the left bottom corner)
bottom = bottom center = center bottom = 50% 100% (in the bottom middle)
bottom right = right bottom = 100% 100% (in the right bottom corner)

In brackets it is specified where background image is placed relative to the container

Example

 
<!--
   HTML {
    height: 100%; /* Page height */ 
   }
   BODY {
    background-image: url('images/mybg.png'); /* Path to the background image */
    background-position: right bottom; /* Location of the background */
    background-repeat: no-repeat; /* Cancel the  repetition of background*/
   }
 
-->
 
...
Object model
[window.]document.getElementById("elementID").style.backgroundPosition