Style backgroundPosition Property

Definition and Usage

backgroundPosition Set or return the position of the background image within the element.

See also:

HTML Styles:background property

CSS Tutorial:CSS Background

CSS3 Tutorial:CSS3 Background

CSS Reference Manual:background-image property

CSS Reference Manual:background-position property

Instance

Example 1

Change the position of the background image:

document.body.style.backgroundPosition = "top right";

Try It Yourself

Example 2

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

document.getElementById("myDiv").style.backgroundPosition = "center bottom";

Try It Yourself

Example 3

Change the position of the background image in the <div> element to 200 pixels horizontally and 40 pixels vertically:

document.getElementById("myDiv").style.backgroundPosition = "200px 40px";

Try It Yourself

Example 4

Returns the position of the background image in the <div> element:

document.getElementById("myDiv").style.backgroundPosition;

Try It Yourself

Syntax

Return the backgroundPosition attribute:

object.style.backgroundPosition

Set the backgroundPosition attribute:

object.style.backgroundPosition = value

Attribute Value

Value Description
  • top left
  • top center
  • top right
  • center left
  • center center
  • center right
  • bottom left
  • bottom center
  • bottom right
 If you specify only one keyword, the other value will be "center".
x% y%

The x value represents the horizontal position, and the y value represents the vertical position.

The top left corner is 0% 0%. The bottom right corner is 100% 100%.

If you specify only one value, the other value is 50%.
xpos ypos

The x value represents the horizontal position, and the y value represents the vertical position.

The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS unit.

If you specify only one value, the other value is 50%. You can mix % and units.
initial Sets this property to its default value. See initial.
inherit Inherits this property from its parent element. See inherit.

Technical Details

Default Value: 0% 0%
Return Value: A string representing the position of the background image.
CSS Version: CSS1

Browser Support

backgroundPosition It is a CSS1 (1996) feature.

All browsers fully support it:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
Supports Supports Supports Supports Supports Supports