Proprietatea background-position

Proprietatea background-position stabilește poziția imaginii de fundal a unui element. Poziția poate fi stabilită folosind orice unități de măsură. Prima valoare indică decalajul din stânga, a doua - decalajul de sus.

De asemenea, poziția poate fi stabilită cu cuvinte cheie. În acest caz, ordinea valorilor nu este importantă. Cuvintele cheie pentru verticală: top, center, bottom. Cuvintele cheie pentru orizontală: left, center, right.

Cum se folosesc cuvintele cheie

Pentru a poziționa o imagine folosind cuvinte cheie, trebuie să specificați o valoare pentru verticală și una pentru orizontală. De exemplu, dacă specificați valoarea top right, imaginea va fi plasată în dreapta sus.

Ordinea cuvintelor nu este importantă: puteți scrie top right, sau puteți - right top. Dacă există cuvântul cheie center - acesta poate fi omis. De exemplu, top center, este același lucru ca doar top. Iar center center este același lucru ca doar center.

Sintaxă

cssselector {
  background-position: două valori separate de spațiu;
}

Exemplu

Implicit, imaginea de fundal va fi în colțul stânga sus:

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

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

Результат:

Exemplu

Să poziționăm imaginea de fundal în colțul dreapta sus:

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

Результат:

Exemplu

Să poziționăm imaginea de fundal în colțul dreapta jos:

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

Результат:

Exemplu

Să poziționăm imaginea de fundal în dreapta și centrată pe verticală:

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

Результат:

Exemplu

Să poziționăm imaginea de fundal în centrul blocului:

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

Результат:

Exemplu

Să poziționăm imaginea de fundal la distanța de 20px din stânga și 40px de sus:

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

Результат:

Exemplu

Să poziționăm imaginea de fundal la distanța de 90% din stânga și 100% de sus:

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

Результат:

Exemplu

Să poziționăm imaginea de fundal la distanța de 30px din stânga și în jos pe verticală:

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

Результат:

Exemplu

Să poziționăm imaginea de fundal la distanța de 30px din stânga și centrată pe verticală:

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

Результат:

Exemplu

Să poziționăm imaginea de fundal la distanța de 30px de sus și centrată pe orizontală:

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

Результат:

Vezi și