CSS background-position Property

Definitie en gebruik

background-position Eigenschap instellen van de startpositie van de achtergrondafbeelding.

Deze eigenschap stelt de oorspronkelijke achtergrondafbeelding in (door background-image Definitie) locatie, als de achtergrondafbeelding moet worden herhaald, begint het vanaf dit punt.

Tip:Je moet de background-attachment eigenschap instellen op "fixedom ervoor te zorgen dat de eigenschap correct werkt in Firefox en Opera.

Zie ook:

CSS tutorial:CSS achtergrond

CSS referentiemanual:background-image eigenschap

HTML DOM referentiemanual:backgroundPosition eigenschap

Voorbeeld

Hoe je achtergrondafbeeldingen positioneert:

body
{ 
background-image:url('bgimage.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}

Probeer het zelf

CSS syntax

background-position: waarde;

Eigenschapswaarde

Waarde Beschrijving
  • bovenlinks
  • bovenmidden
  • bovenrecht
  • middenlinks
  • middenmidden
  • middenrecht
  • linkerbenedenhoek
  • middenbenedenhoek
  • rechterbenedenhoek

Als je alleen een keyword opgeeft, wordt de tweede waarde "center".

Standaardwaarde: 0% 0%.
x% y%

De eerste waarde is de horizontale positie, de tweede waarde is de verticale positie.

Het linkerbovenhoek is 0% 0%. De rechteronderhoek is 100% 100%.

Als je alleen een waarde opgeeft, wordt de andere waarde 50%.
xpos ypos

De eerste waarde is de horizontale positie, de tweede waarde is de verticale positie.

Het linkerbovenhoek is 0 0. De eenheid is pixels (0px 0px) of elke andere CSS-eenheid.

Als je alleen een waarde opgeeft, wordt de andere waarde 50%.

Je kunt % en position-waarden combineren.

Technische details

Standaardwaarde: 0% 0%
Inheritsiviteit: nee
Versie: CSS1
JavaScript syntax: object.style.backgroundPosition="center"

Meer voorbeelden

Hoe je achtergrondafbeeldingen kunt positioneren met %
Dit voorbeeld demonstreert hoe je achtergrondafbeeldingen op een pagina kunt positioneren met behulp van percentages.
Hoe je achtergrondafbeeldingen kunt positioneren met pixels
Dit voorbeeld demonstreert hoe je achtergrondafbeeldingen op een pagina kunt positioneren met behulp van pixels.

Browserondersteuning

Tabelnummers vermelden de eerste browserversie die de eigenschap volledig ondersteunt.

Chrome Edge Firefox Safari Opera
Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5