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