Eigenschap background-position

De eigenschap background-position bepaalt de positie van de achtergrondafbeelding van een element. De positie kan worden opgegeven met behulp van alle eenheden voor afmetingen. De eerste waarde geeft de offset vanaf links aan, de tweede - de offset vanaf boven.

De positie kan ook worden opgegeven met sleutelwoorden. In dat geval is de volgorde van de waarden niet belangrijk. Sleutelwoorden voor de verticale as: top, center, bottom. Sleutelwoorden voor de horizontale as: left, center, right.

Hoe sleutelwoorden te gebruiken

Om een afbeelding met een sleutelwoord te positioneren, moet je één waarde voor de verticale as opgeven en één voor de horizontale as. Als je bijvoorbeeld de waarde top right opgeeft, komt de afbeelding bovenaan rechts.

De volgorde van de woorden is niet belangrijk: je kunt top right schrijven, of right top. Als het sleutelwoord center aanwezig is - kan het worden weggelaten. Bijvoorbeeld, top center is hetzelfde als alleen top. En center center is hetzelfde als alleen center.

Syntaxis

selector {
	background-position: twee waarden gescheiden door een spatie;
}

Voorbeeld

Standaard staat de achtergrondafbeelding in de bovenste linkerhoek:

<div id="elem"></div>

#elem {
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Voorbeeld

Laten we de achtergrondafbeelding in de bovenste rechterhoek plaatsen:

<div id="elem"></div>

#elem {
	background-position: top right;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Voorbeeld

Laten we de achtergrondafbeelding in de onderste rechterhoek plaatsen:

<div id="elem"></div>

#elem {
	background-position: bottom right;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Voorbeeld

Laten we de achtergrondafbeelding rechts en verticaal gecentreerd plaatsen:

<div id="elem"></div>

#elem {
	background-position: right center;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Voorbeeld

Laten we de achtergrondafbeelding in het midden van het blok plaatsen:

<div id="elem"></div>

#elem {
	background-position: center center;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Voorbeeld

Laten we de achtergrondafbeelding op een afstand van 20px vanaf links en 40px vanaf boven plaatsen:

<div id="elem"></div>

#elem {
	background-position: 20px 40px;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Voorbeeld

Laten we de achtergrondafbeelding op een afstand van 90% vanaf links en 100% vanaf boven plaatsen:

<div id="elem"></div>

#elem {
	background-position: 90% 100%;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Voorbeeld

Laten we de achtergrondafbeelding op een afstand van 30px vanaf links en verticaal onderaan plaatsen:

<div id="elem"></div>

#elem {
	background-position: 30px bottom;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Voorbeeld

Laten we de achtergrondafbeelding op een afstand van 30px vanaf links en verticaal gecentreerd plaatsen:

<div id="elem"></div>

#elem {
	background-position: 30px center;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Voorbeeld

Laten we de achtergrondafbeelding op een afstand van 30px vanaf boven en horizontaal gecentreerd plaatsen:

<div id="elem"></div>

#elem {
	background-position: center 30px;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Zie ook

de eigenschap background,
dat een verkorte eigenschap is voor de achtergrond