Egenskaben background-position

Egenskaben background-position angiver placeringen af et elements baggrundsbillede. Placeringen kan angives ved hjælp af alle enheder for størrelser. Den første værdi angiver venstre indrykning, den anden - top indrykning.

Placering kan også angives med nøgleord. I dette tilfælde er rækkefølgen af værdierne ikke vigtig. Nøgleord for vertikal: top, center, bottom. Nøgleord for horisontal: left, center, right.

Sådan bruges nøgleord

For at placere billedet med et nøgleord, skal du angive en værdi for vertikal og en for horisontal. For eksempel, hvis du angiver værdien top right, vil billedet blive placeret øverst til højre.

Rækkefølgen af ordene er ikke vigtig: du kan skrive top right, eller du kan skrive - right top. Hvis der er nøgleordet center - kan det udelades. For eksempel, top center er det samme som blot top. Og center center er det samme som blot center.

Syntaks

selektor {
	background-position: to værdier adskilt af mellemrum;
}

Eksempel

Som standard vil baggrundsbilledet være i det øverste venstre hjørne:

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

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

Eksempel

Lad os placere baggrundsbilledet i det øverste højre hjørne:

<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;
}

Eksempel

Lad os placere baggrundsbilledet i det nederste højre hjørne:

<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;
}

Eksempel

Lad os placere baggrundsbilledet til højre og centreret vertikalt:

<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;
}

Eksempel

Lad os placere baggrundsbilledet i centrum af blokken:

<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;
}

Eksempel

Lad os placere baggrundsbilledet i en afstand af 20px fra venstre og 40px fra toppen:

<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;
}

Eksempel

Lad os placere baggrundsbilledet i en afstand af 90% fra venstre og 100% fra toppen:

<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;
}

Eksempel

Lad os placere baggrundsbilledet i en afstand af 30px fra venstre og i bunden vertikalt:

<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;
}

Eksempel

Lad os placere baggrundsbilledet i en afstand af 30px fra venstre og centreret vertikalt:

<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;
}

Eksempel

Lad os placere baggrundsbilledet i en afstand af 30px fra toppen og centreret horisontalt:

<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;
}

Se også

egenskaben background,
som er en sammentrækningsegenskab for baggrunden