Savybė background-position

Savybė background-position nustato elemento fono paveikslėlio vietą. Vietą galima nustatyti naudojant bet kuriuos dydžių vienetus. Pirmoji reikšmė žymi atstumą iš kairės, antroji - atstumą iš viršaus.

Taip pat galima nustatyti padėtį raktažodžiais. Tokiu atveju reikšmių tvarka nėra svarbi. Vertikalės raktažodžiai: top, center, bottom. Horizontalės raktažodžiai: left, center, right.

Kaip naudotis raktažodžiais

Norėdami pastatyti paveikslėlį raktažodžiu, reikia nurodyti vieną vertikalės reikšmę ir vieną horizontalės reikšmę. Pavyzdžiui, jei nurodysite reikšmę top right, paveikslėlis atsiras viršuje dešinėje.

Žodžių tvarka nesvarbi: galima rašyti top right, o galima - right top. Jei yra raktažodis center - jį galima praleisti. Pavyzdžiui, top center yra tas pats, kas tiesiog top. O center center yrą tas pats, kas tiesiog center.

Sintaksė

selektorius {
	background-position: dvi reikšmės per tarpą;
}

Pavyzdys

Pagal nutylėjimą fono paveikslėlis bus viršutiniame kairiajame kampe:

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

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

Pavyzdys

Pastatykime fono paveikslėlį į viršutinį dešinįjį kampą:

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

Pavyzdys

Pastatykime fono paveikslėlį į apatinį dešinįjį kampą:

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

Pavyzdys

Pastatykime fono paveikslėlį dešinėje ir centre vertikaliai:

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

Pavyzdys

Pastatykime fono paveikslėlį bloko centre:

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

Pavyzdys

Pastatykime fono paveikslėlį atstumu 20px iš kairės ir 40px iš viršaus:

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

Pavyzdys

Pastatykime fono paveikslėlį atstumu 90% iš kairės ir 100% iš viršaus:

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

Pavyzdys

Pastatykime fono paveikslėlį atstumu 30px iš kairės ir apačioje vertikaliai:

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

Pavyzdys

Pastatykime fono paveikslėlį atstumu 30px iš kairės ir centre vertikaliai:

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

Pavyzdys

Pastatykime fono paveikslėlį atstumu 30px iš viršaus ir centre horizontaliai:

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

Taip pat žiūrėkite

savybė background,
kuri yra sutrumpinta fono savybė