CSS :: Свойство background
Сокращенное css-свойство background (от англ. background – фон, задний план) используется для одновременного определения сразу нескольких параметров фона, которые могут быть перечислены в произвольном порядке через пробел.
Характеристики
- Значение по умолчанию: см. каждое свойство.
- Применяется: ко всем элементам.
- Наследуется: нет.
- Анимируется: см. каждое свойство.
- JavaScript: object.style.background="value".
Синтаксис
background: [<фон>, ]* <последний_фон>, где
<фон> = background-image || background-position [ / background-size ] || background-repeat ||
background-attachment || background-origin || background-clip;
<последний_фон> = background-image || background-position [ / background-size ] ||
background-repeat || background-attachment || background-origin || background-clip || background-color
Значения
В качестве значений свойства можно в любом порядке через пробел задать значения свойств background-color, background-image, background-position, background-repeat, background-attachment, background-size, background-origin и background-clip. Если какое-то из значений не будет указано, браузер применит вместо него значение по умолчанию. Разрешается также указывать параметры сразу нескольких фонов, перечисляя их через запятую. При этом, если одновременно с фоновыми изображениями требуется задать цвет фона элемента, он указывается в последнюю очередь после перечисления.
Свойства background-position и background-size принимают свои значения в одном и том же формате. Поэтому, если необходимо задать значение свойства background-size, оно должно указываться через слеш / после значения свойства background-position. Если задано только одно значение, браузер считает, что задано значение свойства background-position.
Кроме того, свойства background-origin и background-clip имеют одни и те же название ключевых слов, принимаемых в качестве значений. Поэтому в случае, когда в элементе установлены как фоновое изображение, так и фон, браузер будет считать, что заданы оба свойства, выделяя соответствующую область элемента под фон и позиционируя соответствующим образом фоновое изображение. Задавать через пробел или слеш / значения обоих свойств не разрешается.
Ссылки
Официальный сайт W3C: https://www.w3.org/TR/css-backgrounds-3/#the-background
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/background
Примеры
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <style> p{ padding: 10px; width: 600px; height: 60px; border: dotted 6px red; } .background_1{ background: #00ff00 fixed padding-box; } .background_2{ background: no-repeat #00ff00 content-box 100px 30px/15px 15px url("images/cabinet.png"); } .background_3{ background: no-repeat #00ff00 content-box url("images/cabinet.png"); } </style> </head> <body> <p class="background_1"> #00ff00 fixed padding-box </p> <p class="background_2"> no-repeat #00ff00 content-box <br> 100px 30px/15px 15px url("images/cabinet.png") </p> <p class="background_3"> no-repeat #00ff00 content-box url("images/cabinet.png") </p> </body> </html>
Пример №1