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.
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.
Alle CSS elementen
