Latest web development tutorials
 

Style backgroundPosition Property

< Style Object

Example

Change the position of a background-image:

document.body.style.backgroundPosition = "top right";
Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The backgroundPosition property sets or returns the position of a background-image within an element.


Browser Support

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

Property
backgroundPosition 1.0 4.0 1.0 1.0 3.5

Syntax

Return the backgroundPosition property:

object.style.backgroundPosition

Set the backgroundPosition property:

object.style.backgroundPosition=value

Property Values

Value Description
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
If you only specify one keyword, the other value will be "center".
x% y% The x value indicates the horizontal position and the y value indicates the vertical position. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%.
xpos ypos The x value indicates the horizontal position and the y value indicates the vertical position. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and units
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

Technical Details

Default Value: 0% 0%
Return Value: A String, representing the position of a background-image
CSS Version CSS1

More Examples

Example

Change the position of the background-image in a <div> element to center bottom:

document.getElementById("myDiv").style.backgroundPosition = "center bottom";
Try it Yourself »

Example

Change the position of the background-image in a <div> element to 200px horizontal and 40px vertical:

document.getElementById("myDiv").style.backgroundPosition = "200px 40px";
Try it Yourself »

Example

Return the position of the background-image in a <div> element:

document.getElementById("myDiv").style.backgroundPosition;
Try it Yourself »

Related Pages

CSS tutorial: CSS Background

CSS reference: background-image property

CSS reference: background-position property

HTML DOM reference: background property


< Style Object