# Свойство background-origin

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

## Синтаксис

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

## Значения

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

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

## Замечания

Свойство `background-origin` не работает, когда `background-attachment` имеет значение `fixed`. Также при `background-repeat` в значении `repeat` свойство `background-origin` всегда работает, как при значении `border-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-origin: border-box; background-image: url("bg.png"); border: 10px dashed black; padding: 30px; width: 250px; height: 150px; }`

:

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

А теперь фон отодвинется через `padding`:

`<div id="elem"></div>` `#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`, то есть фон всегда заходит под границу:

`<div id="elem"></div>` `#elem { background-repeat: repeat; background-image: url("bg.png"); border: 10px dashed black; padding: 30px; width: 350px; height: 300px; }`

:

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

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

← →
↑
en ru