Свойство background-origin

Последнее обновление: 22.12.2010

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

Допустимые значения

  • padding-box — фоновое изображение начинается от внутреннего края границы элемента
  • border-box — фоновое изображение начинается от внешнего края границы элемента
  • content-box —фоновое изображение начинается только в зоне контента.
иллюстрация для background-origin:border-box иллюстрация для background-origin:padding-box иллюстрация для background-origin:content-box
background-origin:border-box background-origin:padding-box background-origin:content-box
Значение по умолчанию padding-box
Применимо ко всем элементам
Наследование нет
Версия CSS CSS 3
Поддерживается браузерами
  • Internet Explorer 9 и выше
  • Firefox 4 и выше
  • Opera 10.5 и выше
  • Safari 5 и выше
  • Chrome 4 и выше

Пример

.block {
background-image: url(images/bg.png);
background-origin: content-box;
padding:20px;
}
Твой код:
Результат:
большой полигон

Заметки

Это свойство относится к CSS3 модулю CSS Backgrounds and Borders Module Level 3 — кандидата в рекомендацию W3C с 17 декабря 2009 года.

Safari 3 и выше и Chrome 1 и выше поддерживают аналогичное свойство -webkit-background-origin, а Firefox 1 и выше соответственно -moz-background-origin. Единственное отличие этих свойств от CSS3 свойства, это то, что возможные значения не padding-box/border-box/content-box, a padding/border/content.

По теме

Показать комментарии