Свойство background - это настоящий швейцарский нож в мире CSS! Оно позволяет не только менять цвет фона или подкладывать за ним изображение, но и делать всё это одним элегантным сообщением. Звучит как магия? На деле это просто удобная синтаксическая конструкция, которая экономит ваше время и нервы.
В рамках одного объявления вы можете комбинировать такие параметры: 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