Свойство background CSS
- предыдущая страница backface-visibility
- следующая страница background-attachment
Определение и использование
background
Краткие свойства устанавливают все свойства фона в одном заявлении.
Можете установить такие свойства:
- background-color
- background-position
- background-size
- background-repeat
- background-origin
- background-clip
- background-attachment
- background-image
Если не устанавливать некоторые значения, это не вызовет проблем, например, background:#ff0000 url('smiley.gif'); также разрешено.
Обычно рекомендуется использовать этот атрибут вместо использования отдельных атрибутов, так как этот атрибут лучше поддерживается в старых браузерах, и для него нужно вводить меньше символов.
См. также:
Уроки CSS:Фон в CSSиCSS фон (продвинутый)
Руководство по HTML DOM:атрибут background
пример
как установить все атрибуты фона в одном заявлении:
body { background: #00FF00 url(bgimage.gif) no-repeat fixed top; }
CSS синтаксис
background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
значение атрибута
значение | описание | CSS |
---|---|---|
background-color | определяет используемый цвет фона. | 1 |
background-position | определяет положение фонового изображения. | 1 |
background-size | определяет размер фонового изображения. | 3 |
background-repeat | определяет, как повторяется фоновое изображение. | 1 |
background-origin | определяет область позиционирования фонового изображения. | 3 |
background-clip | определяет область рисования фона. | 3 |
background-attachment | определяет, является ли фоновое изображение фиксированным или прокручивается вместе с остальной частью страницы. | 1 |
background-image | определяет используемое фоновое изображение. | 1 |
inherit | определяет, что настройка атрибута background должна быть получена от родительского элемента. | 1 |
технические детали
заданный параметр: | не указано |
---|---|
наследование: | нет |
версия: | CSS1 + CSS3 |
JavaScript синтаксис: | object.style.background="white url(paper.gif) repeat-y" |
поддержка браузерами
числа в таблице указывают на первую версию браузера, которая поддерживает этот атрибут полностью.
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome | Edge | Firefox | Safari | Opera |
1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
- предыдущая страница backface-visibility
- следующая страница background-attachment