X
HOME HTML5 CSS3 JAVASCRIPT SQL PHP5 JQUERY ANGULAR BOOTSTRAP3 XML MORE...
REFERENCES | EXAMPLES | FORUM | ABOUT

Style backgroundPosition Property

Style Object Reference Style Object

Example

Change the position of a background-image:

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

Try it yourself »


Definition and Usage

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


Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

The backgroundPosition property is supported in all major browsers.


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 Reference Style Object

Your suggestion:

Close [X]

Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

WEB HOSTING

UK Reseller Hosting

WEB BUILDING

Download XML Editor FREE Website BUILDER Free HTML5 Templates

SHARE THIS PAGE

facebook