# Свойство 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-clip: padding-box; 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`,
  представляющее собой свойство-сокращение для фона

← →
↑
en ru