background-position

background-position

Om de positie te bepalen van een achtergrondplaatje, moet je background-position gebruiken. In de serie CSS op zondag de uitwerking van dit CSS element.

De waarden van background-position
Er zijn meerdere waarden voor dit element. Je kunt namelijk op allerlei manieren de positie bepalen. Met een percentage, in een exacte lengte in bijvoorbeeld pixels. De eerste waarde die wordt gegeven is altijd de horizontale waarde. De tweede waarde is de verticale as. Wanneer er maar een waarde wordt gegeven dan is de tweede waarde automatisch 50% of gecentreerd (center).

Je mag ook negatieve waarden gebruiken en daarmee een plaatje buiten een box plaatsen.

Je kunt ook namen gebruiken. Namelijk left, center, right en top, center, bottom. De eerste drie gaan weer over de horizontale as en de tweede serie van drie over de verticale as. Om het wat duidelijker te maken een voorbeeld.
background-position

Standaardinstelling
Standaard staat de background-position ingesteld op 0% 0%

Voorbeelden
body {background-position: top center;}
Het plaatje wordt bovenaan gecentreerd geplaatst.
div#navigatie {background-position: right;}
Het plaatje wordt aan de rechterkant gezet.
pre {background-position: 10px 50%;}
Het plaatje komt 10 pixels vanaf links en 50% vanaf de bovenzijde.

Hier een voorbeeld van een div waarin het plaatje geplaatst is met de waarde “background-position: 10px 50%;”
Hier een voorbeeld van een div waarin het plaatje geplaatst is met een negatieve waarde: “background-position: -50px 50%;”

Alle CSS elementen

          Leuk als je dit artikel deelt:
Share

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *