background-origin
Поддержка браузерами
12.0+ | 9.0+ | 4.0+ | 4.0+ | 10.5+ | 3.0+ |
Описание
CSS свойство background-origin указывает относительно какой области элемента должно позиционироваться фоновое изображение.
Примечание: если для элемента установлено свойство background-attachment со значением fixed, использование CSS свойства background-origin не даст никакого эффекта.
Значение по умолчанию: | padding-box |
---|---|
Применяется: | ко всем элементам, а также к псевдо-элементам ::first-letter и ::first-line |
Анимируется: | нет |
Наследуется: | нет |
Версия: | CSS3 |
Синтаксис JavaScript: | object.style.backgroundOrigin="content-box" |
Синтаксис
background-origin: padding-box|border-box|content-box|inherit;
Значения свойства
Значение | Описание |
---|---|
padding-box | Фоновое изображение позиционируется относительно верхнего левого угла области внутреннего отступа (устанавливается CSS свойством padding) элемента. |
border-box | Фоновое изображение позиционируется относительно верхнего левого угла рамки элемента (рамка устанавливается с помощью CSS свойства border). При этом стоит учитывать, что фоновое изображение будет частично перекрываться рамкой элемента. |
content-box | Фоновое изображение позиционируется относительно верхнего левого угла области содержимого элемента. |
Пример
CSS Свойство:
background-origin:
Результат:
Онлайн игры, с каждым годом, набирают все большую популярность. Они затягивают нас в свои миры, привлекают нас приятной графикой, симпатичными персонажами и увлекательным сюжетом. Но с играми нужно быть аккуратнее, всем игрокам давно известна фраза - "Пока ты спишь - враг качается!", и подвергнувшись внезапному порыву, мы часто просиживаем за компьютером часами, успокаивая себя, что еще пару минут и на сегодня можно закончить, естественно это не обходится пятью минутами и прекрасный мир игры уже кажется такой же неотъемлемой частью нашей жизни, как и реальность.
CSS Код:
div {
padding: 25px;
border: 5px dotted #000000;
background-image: url('smiley.gif');
background-origin: border-box;
background-repeat: no-repeat;
}
padding: 25px;
border: 5px dotted #000000;
background-image: url('smiley.gif');
background-origin: border-box;
background-repeat: no-repeat;
}