Сейчас, фактически в любом дизайне интернет-сайта находится прекрасная 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, в отсутствии применения каких либо вспомогательных частей. Незапятнанный смысловой код.