Stijl achtergrondpositie eigenschap

Definitie en gebruik

backgroundPosition Instellen of retourneren van de positie van de achtergrondafbeelding in het element.

Zie ook:

HTML Stijlen:background eigenschap

CSS Handleiding:CSS background

CSS3 Handleiding:CSS3 Achtergrond

CSS Referentiemanual:background-image eigenschap

CSS Referentiemanual:background-position eigenschap

Voorbeeld

Voorbeeld 1

Wijzig de positie van de achtergrondafbeelding:

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

probeer het zelf

Voorbeeld 2

Pas de positie van de achtergrondafbeelding van het <div>-element naar beneden centreren:

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

probeer het zelf

voorbeeld 3

verander de positie van de achtergrondafbeelding in het <div>-element naar horizontaal 200 pixels en verticaal 40 pixels:

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

probeer het zelf

voorbeeld 4

geef de positie van de achtergrondafbeelding in het <div>-element terug:

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

probeer het zelf

syntaxis

geef de achtergrondpositie-eigenschap terug:

object.style.backgroundPosition

stel de achtergrondpositie-eigenschap in:

object.style.backgroundPosition = waarde

eigenschapswaarde

waarde beschrijving
  • linkerbovenhoek
  • bovenmidden
  • rechterbovenhoek
  • linkermidden
  • middenmidden
  • rechtermidden
  • linksonderhoek
  • onderhoek
  • rechteronderhoek
 als je slechts één keyword opgeeft, is de andere waarde "center".
x% y%

de x-waarde geeft de horizontale positie aan, de y-waarde de verticale positie.

linksbovenhoek is 0% 0%. Rechteronderhoek is 100% 100%.

als je slechts één waarde opgeeft, is de andere 50%.
xpos ypos

de x-waarde geeft de horizontale positie aan, de y-waarde de verticale positie.

linksbovenhoek is 0 0. Eenheid kan pixels (0px 0px) of elke andere CSS-eenheid zijn.

als je slechts één waarde opgeeft, is de andere 50%. Je kunt % en eenheden combineren.
initial stel deze eigenschap in op zijn standaardwaarde. Zie initial.
inherit voer deze eigenschap over van zijn ouderlijke element. Zie inherit.

technische details

standaardwaarde: 0% 0%
terugkeergewijs: een string die de positie van de achtergrondafbeelding aangeeft.
CSS versie: CSS1

browserondersteuning

backgroundPosition is een CSS1 (1996) kenmerk.

Het wordt volledig ondersteund door alle browsers:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
ondersteuning ondersteuning ondersteuning ondersteuning ondersteuning ondersteuning