Установите различные свойства фона в одном объявлении:
body
{
background: lightblue url("img_tree.gif") no-repeat fixed center;
}
Попробуйте сами »
Определение background
CSS свойство background - это сокращенное свойство для:
- background-color
- background-image
- background-position
- background-size
- background-repeat
- background-origin
- background-clip
- background-attachment
Не имеет значения, отсутствует ли одно из приведенных выше значений, например. background:#ff0000 url(smiley.gif); допускается.
| Значение по умолчанию: | смотрите отдельные свойства |
|---|---|
| Унаследовано: | no |
| Анимируемый: | yes, смотрите отдельные свойства. Читайте о animatable Попробуй |
| Версия: | CSS1 + new properties in CSS3 |
| JavaScript синтаксис: | object.style.background="red url(smiley.gif) top left no-repeat" Попробуй |
Поддержка background
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| background | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Примечание: Смотрите раздел "Поддержка отдельных браузеров" для каждого значения ниже.
Синтаксис background
background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
Примечание: Если одним из свойств в сокращенном объявлении является свойство bg-size, вы должны использовать / (косую черту), чтобы отделить его от свойства bg-position, например. background:url(smiley.gif ) 10px 20px/50px 50px; в результате получится фоновое изображение, расположенное на 10 пикселей слева, на 20 пикселей сверху, а размер изображения составит 50 пикселей в ширину и 50 пикселей в высоту.
Примечание: Если используется несколько источников фоновых изображений, но также требуется цвет фона, параметр background-color должен быть последним в списке.
Значения background
| Значение | Описание | CSS | Демонстрация |
|---|---|---|---|
| background-color | Определяет цвет фона, который будет использоваться | 1 | Демо ❯ |
| background-image | Определяет ОДНО или НЕСКОЛЬКО фоновых изображений, которые будут использоваться | 1 | Демо ❯ |
| background-position | Определяет положение фоновых изображений | 1 | Демо ❯ |
| background-size | Определяет размер фоновых изображений | 3 | Демо ❯ |
| background-repeat | Определяет, как повторять фоновые изображения | 1 | Демо ❯ |
| background-origin | Определяет область позиционирования фоновых изображений | 3 | Демо ❯ |
| background-clip | Определяет область рисования фоновых изображений | 3 | Демо ❯ |
| background-attachment | Определяет, являются ли фоновые изображения фиксированными или прокручиваются вместе с остальной частью страницы | 1 | |
| initial | Устанавливает для этого свойства значение по умолчанию. Читайте о initial | 3 | |
| inherit | Наследует это свойство от своего родительского элемента. Читайте о inherit | 2 |
Страницы по теме background
CSS Учебник: CSS Background, CSS Фон (продвинутый)
HTML DOM справочник: background свойство