Својство 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;
}

Результат:

Погледајте такође