Свойство background-clip

Свойство background-clip задает как фоновая заливка или фоновая картинка будет размещаться относительно элемента: часть фона будет залазить под границу, фон не будет залазить под границу или фон будет размещаться только над содержимым элемента (то есть padding отодвинет фон).

Синтаксис

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

Значения

Значение	Описание
border-box	Фон залезет под границу.
padding-box	Фон не будет залезать под границу.
content-box	Фон будет только над содержимым.

Значение по умолчанию: border-box.

Пример . Значение padding-box, картинка

В данном случае фон не зайдет под границу:

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

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

Пример . Значение border-box, картинка

Сейчас фон зайдет под границу:

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

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

Пример . Значение content-box

А теперь та часть фона, которая находится под padding, будет обрезана:

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

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

Пример . Значение padding-box, заливка

Сейчас фоновый цвет не зайдет под границу:

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

#elem {
	background-color: orange;
	background-clip: padding-box;
	border: 10px dashed black;
	padding: 30px;
	width: 250px;
	height: 150px;
}

Пример . Значение border-box, заливка

А теперь фоновый цвет зайдет под границу:

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

#elem {
	background-color: orange;
	background-clip: border-box;
	border: 10px dashed black;
	padding: 30px;
	width: 250px;
	height: 150px;
}

Пример . Значение content-box, background-color

А теперь фоновая заливка будет отодвинута padding:

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

#elem {
	background-color: orange;
	background-clip: content-box;
	border: 10px dashed black;
	padding: 30px;
	width: 250px;
	height: 150px;
}

Смотрите также

свойство background,
представляющее собой свойство-сокращение для фона