Egenskapen background-position

Egenskapen background-position anger placeringen av ett elements bakgrundsbild. Placeringen kan anges med hjälp av alla enheter för storlekar. Det första värdet anger avståndet från vänster, det andra - avståndet från toppen.

Placering kan också anges med nyckelord. I detta fall är ordningen på värdena inte viktig. Nyckelord för vertikalen: top, center, bottom. Nyckelord för horisontellen: left, center, right.

Hur man använder nyckelord

För att placera en bild med nyckelord måste du ange ett värde för vertikalen och ett för horisontellen. Till exempel, om du anger värdet top right, kommer bilden att hamna uppe till höger.

Ordningen är oviktig: du kan skriva top right, eller så kan du skriva right top. Om det finns nyckelordet center - kan det utelämnas. Till exempel, top center är samma sak som bara top. Och center center är samma sak som bara center.

Syntax

selector {
	background-position: två värden separerade med mellanslag;
}

Exempel

Som standard kommer bakgrundsbilden att vara i det övre vänstra hörnet:

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

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

Exempel

Låt oss placera bakgrundsbilden i det övre högra hörnet:

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

Exempel

Låt oss placera bakgrundsbilden i det nedre högra hörnet:

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

Exempel

Låt oss placera bakgrundsbilden till höger och centrerat 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;
}

Exempel

Låt oss placera bakgrundsbilden i mitten av blocket:

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

Exempel

Låt oss placera bakgrundsbilden på ett avstånd av 20px från vänster och 40px från 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;
}

Exempel

Låt oss placera bakgrundsbilden på ett avstånd av 90% från vänster och 100% från 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;
}

Exempel

Låt oss placera bakgrundsbilden på ett avstånd av 30px från vänster och längst ner 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;
}

Exempel

Låt oss placera bakgrundsbilden på ett avstånd av 30px från vänster och centrerat 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;
}

Exempel

Låt oss placera bakgrundsbilden på ett avstånd av 30px från toppen och centrerat horisontellt:

<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 även

egenskapen background,
som är en sammanfattande egenskap för bakgrunden