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ė

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

Pavyzdys

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

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

css#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ą:

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

css#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ą:

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

css#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