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

Есть очень похожее свойство background-origin с теми же значениями. Разница: background-origin задает позицию только фоновой картинки, а background-clip - фона вообще (и картинки, и просто заливки цветом через background-color).

Данное свойство входит в свойство-сокращение background.

См. все свойства для фона: background-attachment, background-color, background-image, background-position, background-repeat, background-size, background-origin, background-clip, background.

См. также тег img, с помощью которого можно сделать картинку в HTML коде.

Синтаксис

CSS 2.1

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

CSS 3

В CSS3 можно задавать несколько картинок одновременно, перечисляя их через запятую.

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

Значения

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

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

Примеры

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

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

#elem {
	background: url("/images/css/bg.jpg") no-repeat;
	background-clip: padding-box;
	border: 20px dotted black;
	padding: 30px;
	width: 300px;
	height: 300px;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

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

А теперь фон будет только над текстом:

#elem {
	background: url("/images/css/bg.jpg") no-repeat;
	background-clip: content-box;
	border: 20px dotted black;
	padding: 30px;
	width: 300px;
	height: 300px;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

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

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

#elem {
	background: url("/images/css/bg.jpg") no-repeat;
	background-clip: border-box;
	border: 20px dotted black;
	padding: 30px;
	width: 300px;
	height: 300px;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

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

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

#elem {
	background: green;
	background-clip: padding-box;
	border: 20px dotted black;
	padding: 30px;
	width: 300px;
	height: 300px;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

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

Фоновый цвет будет только над текстом:

#elem {
	background: green;
	background-clip: content-box;
	border: 20px dotted black;
	padding: 30px;
	width: 300px;
	height: 300px;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

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

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

#elem {
	background: green;
	background-clip: border-box;
	border: 20px dotted black;
	padding: 30px;
	width: 300px;
	height: 300px;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.