Несколько background с помощью CSS, или Multiple Backgrounds

Сегодня, практически в каждом дизайне сайта присутствует красивая background картинка.

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

Казалось бы, мелочь, но все же, порой нужно сотворить что-то сложное простым способом. Например, реализовать несколько background с индивидуальными параметрами, без использования вспомогательных div блоков. То есть, сохраняя семантическую верстку.

В этой статье мы рассмотрим синтаксис кода, который поддерживает несколько background (multiple backgrounds) в одном элементе. Вот, как это смотрится в реалии:

CSS код для multiple backgrounds

Несколько background картинок реализуются с помощью нескольких значений css параметра background, которые разделены комой:

#multipleBGs {
  background: url(photo1.png),
        url(photo2.png),
        url(photo3.png)
  ;
  background-repeat: no-repeat,
             no-repeat,
             repeat-y;
            
  background-position: 0 0,
             30px 70px,
             right top;
  
  width: 400px; 
  height: 400px;
  border: 1px solid #ccc;
}

Я пытался сделать так же, с помощью краткого кода. К сожалению, не работает.

Плюс к этому, можно использовать другие свойства background (background-attachment, background-clip, background-image, background-origin, background-position, background-repeat, background-size). Так же, как и в CSS градиентах.

Вот и все! Надеюсь вам понравилась эта техника создания нескольких background, без использования каких либо вспомогательных элементов. Чистый семантический код.

Если у вас остались вопросы, замечания или предложения по поводу данной техники создания multiple backgrounds – пишите в комментарии. Также, хотелось бы провести тест на кроссбраузерность. Просьба, всем кто будет использовать (использует) данную технику, написать в комментарии, как это работает в разных браузерах (которыми вы пользуетесь).

Дальше: Как заработать на блоге? Пошаговая инструкция по заработку на блоге.