Свойство background позволяет изменять задний фон элемента (изменять цвет, вставлять изображения вместо фона) и обеспечивает краткий метод установки значения сразу нескольких свойств фона в одном объявлении.
Свойства, значения которых могут быть использованы: background-color, background-position, background-size, background-repeat, background-attachment и background-image. Значения разделяются пробелом и могут следовать в любом порядке, браузер сам определит, какое из них соответствует нужному свойству. Все значения указывать не обязательно, в этом случае вместо пропущенного значения будет использовано значение, которое установлено для свойства по умолчанию, т.е. если к примеру не указан повтор фонового изображения, то будет использовано значение по умолчанию свойства background-repeat.
Для более детальной информации о значениях свойств смотрите описание каждого свойства отдельно.
Совет: когда вы одновременно задаете элементу задний фон и , помните: если стиль рамки - точечная или пунктирная линия, то фоновый цвет или фоновое изображение будет проступать в промежутках между точками или штрихами линий рамки. Другими словами, по умолчанию браузеры размещают линию рамки поверх фона.
| Значение по умолчанию: |
Принимает значения по умолчанию отдельных свойств |
| Наследуется: |
нет |
| Версия: |
CSS1, CSS3 |
| Синтаксис JavaScript: |
object.style.background="red url(smiley.gif) top left no-repeat" |
| Значение |
Описание |
CSS |
|
Указывает цвет, который будет использоваться в качестве фона. |
1 |
|
Задает позицию для фонового изображения. |
1 |
|
Указывает размер фонового изображения. Значения этого свойства можно указывать только после значения свойства background-position, разделяя их с помощью прямого слэша "/", например, 5px 5px/100px 100px. |
3 |
|
Указывает, как повторять фоновое изображение. |
1 |
|
Указывает будет ли фоновое изображение фиксированным или будет прокручиваться вместе с содержимым страницы. |
1 |
|
Определяет фоновое изображение. |
1 |
Пример
!DOCTYPE html
html
head
style type="text/css"
body {
background: url("img_flwr.gif"),
url("img_tree.gif");
}
/style
/head
body
/body
/html