Eienskap background-position

Die eienskap background-position spesifiseer die posisie van 'n element se agtergrondprent. Die posisie kan met enige eenhede vir groottes gespesifiseer word. Die eerste waarde dui die inspringing van links aan, die tweede - die inspringing van bo.

Die posisie kan ook met sleutelwoorde gespesifiseer word. In hierdie geval is die volgorde van waardes nie belangrik nie. Sleutelwoorde vir die vertikale rigting: top, center, bottom. Sleutelwoorde vir die horisontale rigting: left, center, right.

Hoe om sleutelwoorde te gebruik

Om 'n prent met 'n sleutelwoord te posisioneer, moet een waarde vir die vertikale rigting en een vir die horisontale rigting gespesifiseer word. Byvoorbeeld, as die waarde top right gespesifiseer word, sal die prent bo regs wees.

Die volgorde van woorde is nie belangrik nie: jy kan top right skryf, of jy kan right top skryf. As daar 'n sleutelwoord center is - kan dit weggelaat word. Byvoorbeeld, top center, is dieselfde as net top. En center center is dieselfde as net center.

Sintaksis

selektor {
	background-position: twee waardes deur 'n spasie geskei;
}

Voorbeeld

Standaard sal die agtergrondprent in die boonste linkerhoek wees:

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

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

Voorbeeld

Kom ons plaas die agtergrondprent in die boonste regterhoek:

<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

Kom ons plaas die agtergrondprent in die onderste regterhoek:

<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

Kom ons plaas die agtergrondprent regs en in die middel vertikaal:

<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

Kom ons plaas die agtergrondprent in die middel van die blok:

<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

Kom ons plaas die agtergrondprent op 'n afstand van 20px van links en 40px van bo:

<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

Kom ons plaas die agtergrondprent op 'n afstand van 90% van links en 100% van bo:

<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

Kom ons plaas die agtergrondprent op 'n afstand van 30px van links en onderaan vertikaal:

<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

Kom ons plaas die agtergrondprent op 'n afstand van 30px van links en in die middel vertikaal:

<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

Kom ons plaas die agtergrondprent op 'n afstand van 30px van bo en in die middel horisontaal:

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

Sien ook

die eienskap background,
wat 'n kortkode-eienskap vir die agtergrond is