Στυλ ιδιότητας backgroundPosition

Ορισμός και χρήση

backgroundPosition Ρύθμιση ή επιστροφή της θέσης της εικόνας φόντου στο στοιχείο.

Δείτε επίσης:

Στυλ HTML:Η ιδιότητα background

Εκμάθηση CSS:Το background του CSS

Εκμάθηση CSS3:Προσαρμοσμένοι φόντοι CSS3

Κατάλογος CSS:Η ιδιότητα background-image

Κατάλογος CSS:Η ιδιότητα background-position

Παράδειγμα

Παράδειγμα 1

Αλλάξτε τη θέση της εικόνας φόντου:

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

Try it yourself

Παράδειγμα 2

Θέστε τη θέση της εικόνας φόντου στο κέντρο του κάτω μέρους του στο στοιχείο <div>:

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

Return 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 will be 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 will be 50%. You can mix % and units.
initial Set this property to its default value. See initial.
inherit Inherit 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
supported supported supported supported supported supported