background-originСвойство определяет , где рисовать фон: через весь элемент, внутри границы или внутри прокладки.
Есть четыре значения: border-box, padding-box, content-boxи inherit. Вот демо:
См. Демоверсию Pen Background Origin от Тимоти Миллера (@tjacobdesign) на CodePen.
background-origin похож на background-clip, за исключением того, что он изменяет размер фона, а не обрезает его.
Выше пример background-size: coverи background-repeat: no-repeatтакже применяется. Если это не так, изображение будет повторяться под рамкой или отступом.
Связанный
- фоновое приложение
- фоновый клип
- фоновый цвет
- фоновая картинка
- фоновая позиция
- фон-повтор
- размер фона
Дополнительные ресурсы
- CSS3 Spec
- MDN
Поддержка браузера
| Хром | Сафари | Fire Fox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 1+ | 3+ | 4+ | 10.5+ | 9+ | Работает | Работает |