CSS background-position property

Definitions and usages

The background-position property sets the starting position of the background image.

Note For this work in Firefox and Opera, background-attachment must be set to "fixed".

Default:	0% 0%
Inherited:	no
Version:	CSS1
JavaScript syntax:	object object.style.backgroundPosition="center"

background-position: horizontal vertical

The level is

percentage | length | left | center | right

Vertical is

percentage | length | top | center | bottom

value	describe
left top left center left bottom right top right center right bottom center top center center center bottom	If only one keyword is specified, the other values will be "center"
x% y%	The first value is horizontal, and the second value is vertical.The upper left corner is 0% 0%.The lower right corner is 100% 100%.If only one value is specified, the other values will be 50%..The default is: 0% 0%
xpos ypos	The first value is horizontal, and the second value is vertical.The upper left corner is 0.Units can be pixels (0px0px) or any other CSS unit .If only one value is specified, the other values will be 50%.You can mix with% and positions
inherit	Specify Background-Position property settings should inherit from the parent element

How to locate background-image:

body
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}

How to set the page background image
This example shows how to set up background-image on a page.

How to use % to locate the background image
This example shows how to use % to set the image position on the page.

How to use pixels to position a background image
This example shows how to use pixels to set the image position on a page.

The numbers in the table support the first browser version number of the property.

Property
background-position	1.0	4.0	1.0	1.0	3.5

Note: IE8 and earlier browser versions do not support an element with multiple background pictures.