Stil bakgrundPosition egenskapen

Definition och användning

backgroundPosition Ställ in eller returnera bakgrundsbildens position i elementet.

Se också:

HTML Stilar:background egenskapen

CSS Tutorial:CSS-bakgrund

CSS3 Tutorial:CSS3 Bakgrund

CSS Referenshandbok:background-image egenskapen

CSS Referenshandbok:background-position egenskapen

Exempel

Exempel 1

Ändra positionen för bakgrundsbilden:

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

Prova själv

Exempel 2

Ändra positionen för bakgrundsbilden i <div>-elementet till mitt i botten:

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

Prova själv

Exempel 3

Ändra platsen för bakgrundsbilden i <div>-elementet till horisontellt 200 pixlar och vertikalt 40 pixlar:

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

Prova själv

Exempel 4

Returnera platsen för bakgrundsbilden i <div>-elementet:

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

Prova själv

Syntax

Returnera backgroundPosition-egenskapen:

object.style.backgroundPosition

Ställ in backgroundPosition-egenskapen:

object.style.backgroundPosition = value

egenskapsvärde

värde beskrivning
  • överst vänster
  • överst mittpunkt
  • överst höger
  • mittpunkt vänster
  • mittpunkt mittpunkt
  • mittpunkt höger
  • nedre vänster
  • nedre mittpunkt
  • nedre höger
 Om du bara anger ett nyckelord, blir det andra värdet "center".
x% y%

x-värdet representerar horisontell position, y-värdet representerar vertikal position.

Överst till vänster är 0% 0%. Nederst till höger är 100% 100%.

Om du bara anger ett värde, blir det andra värdet 50%.
xpos ypos

x-värdet representerar horisontell position, y-värdet representerar vertikal position.

Överst till vänster är 0 0. Enheterna kan vara pixlar (0px 0px) eller någon annan CSS-enhet.

Om du bara anger ett värde, blir det andra värdet 50%. Du kan blanda använda % och enheter.
initial Sätt denna egenskap till dess standardvärde. Se initial.
inherit Inheritera denna egenskap från föräldrelementet. Se inherit.

Tekniska detaljer

Standardvärde: 0% 0%
Returvärde: en sträng som anger platsen för bakgrundsbilden.
CSS-version: CSS1

webbläsarstöd

backgroundPosition är en CSS1 (1996) egenskap.

Alla webbläsare stöder det fullt ut:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
stödjer stödjer stödjer stödjer stödjer stödjer