Главная/ Cправочник HTML, CSS, Javascript/ CSS справочник/ Свойства CSS для улучшения дизайна сайта/ CSS свойство background | назначение, допустимые значения, примеры

Свойство background

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

Свойство background — это сокращенный способ установить все или некоторые свойства фона: background-attachment, background-color, background-image, background-position, background-repeat.

Полный вариант:

background-color: #fff;
background-image: url(path-to/bg.png);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center top;

Сокращенный:

background: url(path-to/bg.png) center top #fff no-repeat scroll;

Порядок свойств значения не имеет. Но следует учесть, что первое значение background-position — значение относительно левого края блока, второе — относительно верхнего края для случаев, когда позиция фона задана координатами:

background-image: url(path-to/bg.png);
background-position: 10px 100px;

Сокращенный вариант:

background: url(path-to/bg.png) 10px 100px;

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

Смотрите значения свойств background-attachment, background-color, background-image, background-position, background-repeat

Значение по умолчанию Зависит от используемых элементов (если взять грубо = none)
Применимо ко всем элементам
Наследование нет
Версия CSS CSS 1
Поддерживается браузерами
  • Internet Explorer 6 и выше
  • Firefox 1 и выше
  • Opera 7 и выше
  • Netscape 6 и выше
  • Safari 1 и выше
  • Chrome 1 и выше

Пример


.block1 {
background: url(images/bg.png) center top #fff no-repeat scroll;
}
.block2 {
background: url(images/bg.png) 10px 100px;
}

Заметки

Используйте сокращенную запись свойств background — это позволит сократить объем CSS кода.

По теме

Теги: ,