CSS background-positionProperty

Example

How to position background-image:

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

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

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

Default Value:	0% 0%
Inherited:	no
version:	CSS1
JavaScript Syntax:	object object.style.backgroundPosition="center"

The numbers in the table specify the first browser version that supports the property.

Property
background-position	1.0	4.0	1.0	1.0	3.5

Note:IE8 and earlier browser versions do not support multiple background images on one element.

Value	Description
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 value will be "center".
x% y%	The first value is the horizontal position, the second value is vertical. Top left is 0% 0%. Bottom right is 100% 100%. If only one value is specified, the other value will be 50%. . Default value is: 0% 0%.
xpos ypos	The first value is the horizontal position, the second value is vertical. Top left is 0. Units can be pixels (0px 0px) or any otherCSS units. If only one value is specified, the other value will be 50%. You can mix % and positions.
inherit	Specifies that the background-position property setting should be inherited from the parent element.

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

How to use % to position background images
This example demonstrates how to set the position of an image on a page using %.

How to use pixels to position background images
This example demonstrates how to set the position of an image on a page using pixels.

other extensions