Proprietatea background-origin

Proprietatea background-origin stabilește modul în care imaginea de fundal (mai exact imaginea, nu culoarea de fundal) va fi plasată în raport cu elementul: o parte a imaginii de fundal va pătrunde sub bordură, fundalul nu va pătrunde sub bordură sau fundalul va fi plasat doar peste conținutul elementului (adică padding va îndepărta fundalul).

Sintaxă

cssselector {
  background-origin: padding-box | border-box | content-box;
}

Valori

Valoarea implicită: padding-box.

Observații

Proprietatea background-origin nu funcționează, când background-attachment are valoarea fixed. De asemenea, când background-repeat are valoarea repeat, proprietatea background-origin întotdeauna funcționează ca și cu valoarea border-box.

Exemplu . Implicit

Implicit, fundalul nu va pătrunde sub bordură:

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

css#elem {
  background-image: url("bg.png");
  background-repeat: no-repeat;
  border: 10px dashed black;
  padding: 30px;
  width: 250px;
  height: 150px;
}

Результат:

Exemplu . Valoarea border-box

Acum fundalul va pătrunde sub bordură:

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

css#elem {
  background-origin: border-box;
  background-image: url("bg.png");
  border: 10px dashed black;
  padding: 30px;
  width: 250px;
  height: 150px;
}

Результат:

Exemplu . Valoarea content-box

Iar acum fundalul se va distanța datorită padding:

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

css#elem {
  background-origin: content-box;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  border: 10px dashed black;
  padding: 30px;
  width: 250px;
  height: 150px;
}

Результат:

Exemplu . Cu background-repeat: repeat

Când background-repeat are valoarea repeat, proprietatea background-origin întotdeauna funcționează ca și cu valoarea border-box, adică fundalul întotdeauna pătrunde sub bordură:

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

css#elem {
  background-repeat: repeat;
  background-image: url("bg.png");
  border: 10px dashed black;
  padding: 30px;
  width: 350px;
  height: 300px;
}

Результат:

Vezi și