Својство background-origin

Својството background-origin одредува како позадинската слика (точно сликата, не пополнувањето) ќе се поставува во однос на елементот: дел од позадинската слика ќе навлегува под границата, позадината нема да навлегува под границата или позадината ќе се поставува само над содржината на елементот (односно padding ќе ја оддалечи позадината).

Синтакса

cssселектор {
  background-origin: padding-box | border-box | content-box;
}

Вредности

Стандардна вредност: padding-box.

Забелешки

Својството background-origin не работи, кога background-attachment има вредност fixed. Исто така при background-repeat во вредност repeat својството background-origin секогаш работи, како при вредност border-box.

Пример . Стандардно

Стандардно позадината нема да навлегува под границата:

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

Результат:

Пример . Вредност border-box

Сега позадината ќе навлезе под границата:

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

Результат:

Пример . Вредност content-box

А сега позадината ќе се оддалечи преку 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;
}

Результат:

Пример . При background-repeat: repeat

При background-repeat во вредност repeat својството background-origin секогаш работи, како при вредност border-box, односно позадината секогаш навлегува под границата:

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

Результат:

Погледнете ги и