Уласцівасць 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;
}

Результат:

Глядзіце таксама