YouTipHTML DOM Style backgroundPosition Property | Rookie Tutorial
Rookie Tutorial -- Learn not only technology, but also dreams!
- Home
- HTML
- JavaScript
- CSS
- Vue
- React
- Python3
- Java
- C
- C++
- C#
- AI
- Go
- SQL
- Linux
- VS Code
- Bootstrap
- Git
- Local Bookmarks
JavaScript Reference Manual
JavaScript Objects
- JavaScript Array Object
- JavaScript Boolean Object
- JavaScript Date Object
- JavaScript Math Object
- JavaScript Number Object
- JavaScript String Object
- JavaScript RegExp Object
- JavaScript Global Properties/Functions
- JavaScript Operators
- JavaScript Error
Browser Objects
DOM Objects
- HTML DOM Document Object
- HTML DOM Element Object
- HTML DOM Attribute Object
- HTML DOM Event Object
- HTML DOM Console Object
- CSSStyleDeclaration Object
- DOM HTMLCollection
HTML Objects
- <a>
- <area>
- <audio>
- <base>
- <blockquote>
- <body>
- <button>
- <canvas>
- <col>
- <colgroup>
- <datalist>
- <del>
- <details>
- <dialog>
- <embed>
- <fieldset>
- <form>
- <iframe>
- <frameset>
- <img>
- <ins>
- <input> - button
HTML DOM Style backgroundPosition Property
Definition and Usage
The backgroundPosition property sets or returns the position of a background image.
Syntax
Set the backgroundPosition property:
object.style.backgroundPosition = "xpos ypos | x% y% | left top | left center | left bottom | right top | right center | right bottom | center top | center center | center bottom | initial | inherit"Return the backgroundPosition property:
object.style.backgroundPositionProperty Values
| Value | Description |
|---|---|
| xpos ypos | Position values in pixels or other length units. The first value is the horizontal position, the second value is the vertical position. If only one value is specified, the second value is set to "50%". |
| x% y% | Position values in percent. The first value is the horizontal position, the second value is the vertical position. If only one value is specified, the second value is set to "50%". |
| left top | Positioned at the top left corner |
| left center | Positioned at the center left |
| left bottom | Positioned at the bottom left corner |
| right top | Positioned at the top right corner |
| right center | Positioned at the center right |
| right bottom | Positioned at the bottom right corner |
| center top | Positioned at the top center |
| center center | Positioned at the center |
| center bottom | Positioned at the bottom center |
| initial | Sets the property to its default value. Read about initial |
| inherit | Inherits the property from its parent element. Read about inherit |
Browser Support
All major browsers support the backgroundPosition property.
Example
Change the position of a background image to "center":
document.getElementById("myDiv").style.backgroundPosition = "center";Output (try it yourself):
// No output code provided - just the example above