Последнее обновление: 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 |
| Поддерживается браузерами |
|
Пример
.block1 {
background: url(images/bg.png) center top #fff no-repeat scroll;
}
.block2 {
background: url(images/bg.png) 10px 100px;
} Заметки
Используйте сокращенную запись свойств background — это позволит сократить объем CSS кода.
По теме
- img vs background-image
- Градиент: CSS3 против CSS2 + картинка
- Масштабируемый фон
- Ресайз окна: потомок перерос родителя
- Спрайты: меньше картинок, больше скорость
- Центрирование картинки в блоке
- Свойство background-clip
- Свойство background-origin
- Свойство background-size
Теги: фон, CSS свойства