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

Что такое background?

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

Фон имеет ширину и высоту элемента и включает отступы и границы.

Если элемент имеет прозрачные границы, под ними можно увидеть фоновое изображение, но не забывайте, что IE выполняет эту часть спецификации неверно, фон заходит под границы, только если их ширина 1px, а для границ шире 1px, фон доходит только до начала границы.

Вот маленький пример, который хорошо подтверждает все вышесказанное.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type"
        content="text/html; charset=iso-8859-1" />
    <title>Background test</title>
    <style type="text/css">

      #test{
        width: 100px;
        height: 100px;
        background: red;
        border: 10px dashed green;
      }
    </style>
  </head>
  <body>
    <div id="test">test</div>
  </body>

</html>

Разница отображения background в IE, Firefox и Opera

Я использовал зеленые пунктирные границы, чтобы была видна вся область фона. Как видите в IE (включая IE7) область фона заканчивается там где начинается граница, тогда как в большинстве других браузеров фон распространяется на всю ширину контейнера.

Конечно, эта проблема редко встает в повседневной работе, но о ней стоит знать.

Свойства фона

Во многих случаях, следующее верно как для block, так и для inline элементов, исключение только в том, что повторение и позиционирование background-image в inline элементах не определено спецификацией CSS2.1.

Свойства, управляющие отображением фона:

  • background-color
  • background-image
  • background-repeat
  • background-position
  • background-attachment

Давайте рассмотрим, как работает и, что делает каждое свойство.

background-color

Возможные значения: color | transparent | inherit

Как и можно предположить, свойство устанавливает цвет фона элемента, указать его можно несколькими различными способами:

background-color: #000000;

или в сокращенной форме:

background-color: #000; 

конечно, можно использовать и названия цветов:

background-color: red;

или rgb нотацию:

background-color: rgb(0,0,0);

Дополнительные способы представления цветов можно узнать на сайте W3C.

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

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

background-color: inherit; позволяет элементам наследовать background-color родительского элемента. Распространено ошибочное мнение, что цвет фона наследуется по умолчанию, на самом деле цвет фона родительского элемента можно видеть в потомках потому, что по умолчанию фон прозрачный.

background-image

Возможные значения: uri | none | inherit

Свойство background-image позволяет разместить изображение в фоне элемента, для этого нужно указать верный путь к изображению.

background-image: url(example-image.gif);

Обратите внимание, что путь к изображению указывается относительно места размещения файла css, а не html страницы, на которой он используется, если файл css находится в папке /css, то использовать изображение из папки того же уровня можно с помощью конструкции:

background-image: url(../images/example-image.gif);

использовать кавычки не обязательно, но это не будет ошибкой

background-image: url("../images/example-image.gif");

можно использовать и одинарные кавычки, но из-за бага в IE5/Mac изображение не будет отображено.

По умолчанию изображение будет расположено в левом верхнем углу элемента, повторятся по горизонтали и вертикали, и скролится вместе с ним.

Давайте поэкспериментируем с фоновым изображением для элемента body.

body {
  margin: 0;
  padding: 0;
  background-image: url(image/dw-star.jpg);
}

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

Повторяющее изображение звезды

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

Значение none позволяет запретить использование изображений в фоне элемента.

background-image: inherit;

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

background-repeat

Возможные значения: repeat | repeat-x | repeat-y | no-repeat | inherit

Это свойство позволяет задать направление в котором будет повторятся фоновое изображение или запретить его повторение.

Значение по умолчанию repeat, изображение повторяется по горизонтали и вертикали.

Если указать repeat-x, изображение будет повторяться по горизонтали, начальная позиция по умолчанию верхний левый угол, но ее можно изменить с помощью свойства background-position.

Фоновое изображение повторяющееся только по горизонтали

repeat-y изображение будет повторяться по вертикали.

Фоновое изображение повторяющееся только по вертикали

Значение no-repeat запрещает повторение изображения. Изображение будет размещено в месте указанном с помощью background-position по умолчанию это левый верхний угол.

Не повторяющееся фоновое изображение

Значение свойства background-repeat будет унаследовано от родительского элемента, если использовать background-repeat: inherit, но едва ли вам это понадобится.

background-position

Возможные значения: фиксированные единицы (например, px) | проценты | ключевые слова

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

background-position: 100px 200px; разместит изображение в 100px от левой и в 200px от верхней границы блока, сначала задается горизонтальная позиция, а потом вертикальная, если указать только одно значение то оно будет использоваться как горизонтальная позиция, а для вертикальной позиции будет использоваться значение 50%.

Если используется повторяющийся фон, то указанная позиция будет использоваться для первоначального размещения изображения, которое потом будет повторятся по горизонтали, вертикали или в обоих направлениях, в зависимости от значения свойства background-repeat.

background-position: 50% 100%; процентные величины обрабатываются немного по-другому, в данном случае 50% горизонтальная позиция в изображении будет выровнена с 50% горизонтальной позицией в элементе, и 100% вертикальная позиция в изображении (нижняя граница) будет выровнена со 100% вертикальной позицией в элементе (с нижней границей).

Проще объяснить это на сравнении background-position: 50% 50% с такими же значениями при использовании абсолютного позиционирования. Если использовать свойства position: absolute, left: 50% и top: 50%, то верхний левый угол элемента будет размещен в центре родительского элемента, то есть элемент не будет отцентрирован, а будет располагаться в правой нижней четверти родительского элемента.

Background-position 50% 50%

Процентные величины в свойстве background-position, указывают положение не верхнего левого угла, а соответствующей их значению точки изображения и background-position: 50% 50% разместит изображение точно по центру элемента.

Я думаю теперь вы не сомневаетесь, что свойство background-position: 100% 100%; разместит изображение в правом нижнем углу.

Конечно, можно смешивать процентные величины и значения в пикселях, если это нужно:

background-position: 50% 200px;

Можно смешивать с другими величинами и ключевые слова (это стало доступно в CSS2.1), но я хотел бы предостеречь вас от этого, потому что только современные браузеры будут работать с такими значениями корректно, тем более что очень легко заменить ключевые слова соответствующими процентными величинами.

Ключевые слова

Для позиционирования фонового изображения по горизонтали могут быть использованы ключевые слова left, center, right, а по вертикали top, center, bottom.

Чтобы расположить изображение в верхнем левом углу элемента можно использовать свойство:

background-position: left top;

Список возможны сочетаний и их эквиваленты в процентах:

background-position: left top;    /* 0% 0% */
background-position: left center;  /* 0% 50% */
background-position: left bottom;  /* 0% 100% */

background-position: right top;    /* 100% 0% */
background-position: right center;  /* 100% 50% */
background-position: right bottom;  /* 100% 100% */

background-position: center top;   /* 50% 0% */
background-position: center center;  /* 50% 50% */
background-position: center bottom;  /* 50% 100% */

В отличии от других единиц, при использовании ключевых слов не обязательно указывать сначала горизонтальную, а потом вертикальную позицию изображения, можно использовать background-position: top left; вместо background-position: left top;, или использовать одно ключевое слово вместо двух:

background-position: top;  /* 50% 0% */
background-position: left;  /* 0% 50% */
background-position: center;  /* 50% 50% */
background-position: right;  /* 100% 50% */
background-position: bottom;  /* 50% 100% */

background-attachment

Возможные значения: scroll | fixed | inherit

Это свойство отражает то, будет фоновое изображение скролится вместе с документом или будет зафиксировано относительно окна браузера. По умолчанию используется значение scroll, то есть если документ будет скролится вверх или вниз то и изображение будет скролится вместе с ним.

Значение fixed используется, чтобы закрепить фоновое изображение относительно окна браузера, например, если добавить фоновое изображение с координатами 50% 50% к элементу body, оно будет оставаться в центре окна, даже при прокрутке документа. Это может быть достаточно полезно, если нужно разместить изображение так, чтобы оно было видно, несмотря на прокрутку документа и количество контента.

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

Если есть элемент, который отцентрирован относительно окна браузера, и для него указано свойство background-position: 10px 10px вы ожидаете, что изображение будет размещено на 10px правее и ниже левого верхнего угла этого элемента, но на самом деле изображение позиционируется относительно окна браузера.

Давайте рассмотрим пример, который внесет ясность в такое поведение изображения. Я разместил абсолютно позиционируемый элемент в 100px от левого верхнего угла страницы, и применил к нему стиль background-image: fixed; и background-position: 10px 10px .

#outer {
  position: absolute;
  left: 50px;
  top: 100px;
  width: 200px;
  height: 200px;
  background: url(star.jpg) no-repeat fixed 10px 10px;
  border: 1px solid red;
}

В FireFox это будет выглядеть так:

Куда пропало изображение

Кажется, что изображение исчезло, на самом деле оно расположено в 10px от левого верхнего угла окна браузера, но отображается только в пределах элемента, для которого мы его назначили фоновым, чтобы убедиться в этом поднимем элемент #outer чуть выше:

#outer {
  position: absolute;
  left: 50px;
  top: 30px;
  width: 200px;
  height: 200px;
  background: url(star.jpg) no-repeat fixed 10px 10px;
  border: 1px solid red;
}

Изображение звезды нашлось

Ага! Теперь мы видим часть изображения.

Неужели это полезно, и как с IE6

Теперь мы знаем, как найти наше изображение, и задумались над тем, можно ли это как-то использовать и как оно будет выглядеть в IE.

Чтобы разобраться с тем как IE отображает такой фон, рассмотрим пример:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type"
        content="text/html; charset=iso-8859-1" />

    <title>Untitled Document</title>
    <style type="text/css">
      * {margin:0;padding:0}
      #outer {
        position: absolute; 
        left: 100px; 
        top: 100px; 
        width: 400px; 
        height: 300px; 
        background: url(volcano.jpg) no-repeat fixed 10px 10px; 
        border: 1px solid red; 
      }
    </style>
  </head>
  <body>

    <div id="outer">
      <p>test</p>
    </div>
  </body>
</html>

Пример фиксированного фона

На случай если у вас нет этих браузеров, я выложил скриншоты этого примера в Firefox и IE.

Фиксированный фон в Firefox

Фиксированный фон в IE6

Как видите в Firefox, отображается только та часть изображения, которая находится в пределах контейнера #outer.

IE6 отображает пример неверно и позиционирует изображение относительно контейнера #outer, вместо окна браузера.

Чтобы использовать фиксированный фон кроссбраузерно, нужно применять свойство background-attachment: fixed только к элементу body.

Inherit

Если использовать background: inherit, элемент будет наследовать свойства фона родительского элемента, но в этом практически нет необходимости, потому что по умолчанию фон элементов прозрачный.

К тому же в IE6 и Safari 2.0 есть небольшой баг связанный с background: inherit, наследование свойств фона не сбрасывает цвет фона.

Стенография

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

Достаточно обширный код:

#test {
  background-color: #000; 
  background-image: url(image-name.jpg); 
  background-position: 10px 10px; 
  background-repeat: no-repeat; 
  background-attachment: fixed; 
}

Можно сократить до:

#test {
  background: #000 url(image-name.jpg) no-repeat fixed 10px 10px; 
}

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

Если использовать код:

#test {
  background-color: red; 
  background: url(image-name.jpg); 
}

Цвет фона элемента не будет красным, потому что стенографическое свойство background установит для него значение по умолчанию transparent.

Порядок значений для свойства background не важен, потому что браузеры все равно будут определять их правильно, но не забывайте, что порядок указания координат фонового изображения должен быть таким же, как и в свойстве background-position, которое было рассмотрено выше.

Итог

Мы рассмотрели множество аспектов свойства background и значений, которые можно для него использовать, как видите это очень разностороннее и универсальное свойство, с его помощью можно создавать интересные эффекты.

Другие статьи на эту тему