background

Содержание

Универсальное свойство background позволяет установить одновременно до пяти характеристик фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному свойству. Для подробного ознакомления смотрите информацию о каждом свойстве отдельно. Допустимо, также, указывать параметры сразу нескольких фонов, перечисляя их через запятую.

Краткая информация

Значение по умолчаниюtransparent || none || repeat || scroll || 0% 0%
НаследуетсяНет
ПрименяетсяКо всем элементам

Синтаксис

background: [<фон>, ]* <последний_фон>

Здесь:

<фон> = [background-attachment || background-image || background-position || background-repeat]

<последний_фон> = [background-attachment || background-color || background-image || background-position || background-repeat]

Если наряду с фоновыми изображениями требуется задать цвет фона элемента, он указывается в последнюю очередь после перечисления.

Значения

Любые комбинации пяти значений, разделяемых между собой пробелом, определяющих стиль фона, в произвольном порядке. Ни одно значение не является обязательным, поэтому неиспользуемые можно опустить.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>background</title>
  <style>
   div {
    height: 200px; /* Высота блока */
    width: 200px; /* Ширина блока */
    overflow: auto; /* Добавляем полосы прокрутки */
    padding-left: 15px; /* Отступ от текста слева */
    background: url(image/hand.png) repeat-y #fc0; /* Цвет фона, 
                                                    путь к фоновому изображению и 
                                                    повторение фона по вертикали */
   }
  </style>
 </head>
 <body>
  <div>Великобритания, куда входят Пик-Дистрикт, Сноудония и 
  другие многочисленные национальные резерваты природы и парки, 
  неумеренно применяет культурный рельеф. Суша морей начинает 
  туристический подземный сток. Дождливая погода дегустирует кандым. 
  Винный фестиваль проходит в приусадебном музее Георгикон, там же 
  беспошлинный ввоз вещей и предметов в пределах личной потребности 
  связывает белый саксаул. Санитарный и ветеринарный контроль 
  оформляет городской Гвианский щит.</div>
 </body>
</html>

Результат данного примера показан ниже (рис. 1).

Вид фона и фонового рисунка в блоке фиксированного размера

Рис. 1. Вид фона и фонового рисунка в блоке фиксированного размера

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>background</title>
  <style>
   body {
    background: url(image/hand.png) repeat-y, 
                url(image/bg-right.png) repeat-y 100% 0, #fc0;
   }
  </style>
 </head>
 <body>
 </body>
</html>

Объектная модель

Объект.style.background

Спецификация

СпецификацияСтатус
CSS Backgrounds and Borders Module Level 3Возможная рекомендация
CSS Level 2 (Revision 1)Рекомендация
CSS Level 1Рекомендация

Браузеры

 Internet ExplorerChromeOperaSafariFirefox
один фон413.511
несколько фонов9110.51.33.6
 AndroidFirefox MobileOpera MobileSafari Mobile
один фон2.11103.2
несколько фонов2.11103.2




Рекомендую хостинг: beget.ru

Сервер падал:110 дн. 23:02 назад.

Посещений в месяц:205640

Посещений в день:100


+7 (951) 527 0204

+7 (928) 103 4987

programmer@niesoft.ru