В CSS 2 добавить одновременно два фона к одному элементу нереально, поэтому приходится вкладывать один элемент внутрь другого и для каждого задавать свой собственный фоновый рисунок. Для сложных макетов таких вложений иной раз можно насчитать около десятка. Понятно, что ни к чему хорошему такое нагромождение не приводит, но что делать? Оказывается, есть что! В CSS 3 можно одновременно добавлять несколько фоновых рисунков для любого элемента. Так что берем рисунок блока (рис. 1), режем его на части и начинаем тестировать в браузерах.

Рис. 1. Блок для сайта

Для простоты, ширину блока возьму фиксированного размера, а высота будет тянуться в зависимости от контента. По рисунку хорошо видно верхнюю и нижнюю часть, вырезаю в редакторе и складываю пластами в отдельном файле. Среднюю часть надо выбрать так, чтобы она повторялась без швов по вертикали. Рисунок имеет хорошо выраженный повторяющийся орнамент, так что трудностей с выделением быть не должно. Копирую и вставляю к предыдущим фрагментам. В итоге получится такая картинка (рис. 2).

Рис. 2. Подготовленные изображения

В принципе, можно сохранить каждый фрагмент в виде отдельного файла, но у CSS-спрайтов (так называется технология склейки нескольких изображений в одно) есть ряд преимуществ. Во-первых, сокращается количество запросов к серверу из-за сокращения количества файлов и, во-вторых, рисунки в сумме загружаются и отображаются быстрее.

Сам фон выводится свойством background , оно же задает и координаты нужного фрагмента. Параметры каждого фона перечисляются через запятую, и в данном случае имеет значение их порядок. Мне требуется, чтобы верхняя и нижняя часть блока не перекрывались, поэтому ставлю их первыми (пример 1).

Пример 1. Несколько фоновых картинок

HTML5 CSS2.1 CSS3 IE 8 IE 9 Cr Op Sa Fx

Первый фон выводит верхнюю границу блока, второй фон - нижнюю, а третий вертикальные границы.

Проверяем в браузерах. Internet Explorer 8 вообще не вывел никаких рисунков, остальные браузеры (IE 9, Opera 10.60, Firefox 3.6, Chrome 5, Safari 5) отобразили рамку корректно (рис. 3).

Рис. 3. Вид рамки в браузере Safari

С использованием множественных фонов ситуация для разработчиков существенно облегчается, особенно при верстке блоков. Остается только одна мелочь. Надо чтобы браузер IE 6–8 прекратил свое существование.

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

Использование псевдо-элементов CSS 2.1 дает возможность задействовать 3 уровня для фона, 2 изображения с фиксированными размерами и множественные сложные обводки для одного элемента HTML. Данный метод существенно расширяет возможности оформления веб страниц для всех браузеров, которые поддерживают псевдо-элементы CSS 2.1 с позиционированием. Поддержка CSS3 не требуется.

По существу, создание псевдо-элементов CSS (:before и:after) и работа с ними похожа на то, как организуется работа с вложенными элементами HTML внутри целевого элемента. Но с одним существенным преимуществом - все производится вне семантики, без использования вложенных элементов HTML.

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

Псевдо-элемент не содержит реального контента и позиционируется абсолютно. Таким образом, он может быть растянут над любой областью "родительского" элемента без влияния на контент. Для этого можно использовать комбинацию свойств top , right , bottom , left , width и height .

Какие эффекты можно получить?

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

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

В дополнение, можно использовать изменение стилей для:hover, чтобы получить более сложные эффекты.

Пример кода: множественные изображения для фона

С помощью данной техники можно воспроизвести эффект параллакса с множественными изображениями для фона (такой используется на сайте Silverback), задействовав при этом только один HTML элемент.

Элемент получает свой собственный фон и нужные отступы. Относительное позиционирование элемента действует как точка отсчета при абсолютном позиционировании псевдо-элементов. Положительное значение z-index позволяет корректировать положение псевдо-элементов по оси z.

#silverback { position:relative; z-index:1; min-width:200px; min-height:200px; padding:120px 200px 50px; background:#d3ff99 url(vines-back.png) -10% 0 repeat-x; }

Оба псевдо-элемента позиционируются абсолютно и размещаются по сторонам элемента. Значение z-index равное -1 размещает псевдо-элемент позади слоя контента . Таким образом, псевдо-элементы располагаются поверх фона элемента и его обводки, но весь контент остается доступным для выделения и воспринимает нажатия кнопки мыши.

#silverback:before, #silverback:after { position:absolute; z-index:-1; top:0; left:0; right:0; bottom:0; padding-top:100px; }

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

Свойство content позволяет добавлять изображение как генерированный контент. Имея два псевдо элемента можно добавить 2 дополнительных изображения к элементу. Они могут быть грубо позиционированы в псевдо-элементах с помощью других свойств, таких как text-align и padding .

#silverback:before { content:url(gorilla-1.png); padding-left:3%; text-align:left; background:transparent url(vines-mid.png) 300% 0 repeat-x; } #silverback:after { content:url(gorilla-2.png); padding-right:3%; text-align:right; background:transparent url(vines-front.png) 70% 0 repeat-x; }

Пример кода: гибкие искусственные колонки

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

Разметка HTML очень проста. Используем классы для каждого элемента div вместо селекторов CSS 2.1, которые не поддерживаются IE6. Если нет необходимости поддерживать IE6, то можно использовать селекторы.

Контейнер имеет ширину, заданную в процентах, относительное позиционирование и положительное значение свойства z-index . Использование overflow:hidden позволяет элементу переносить на другую строку контент своих плавающих потомков и скрывает выступающие псевдо-элементы. Цвет фона обеспечивает цвет для одной из колонок.

#faux { position:relative; z-index:1; width:80%; margin:0 auto; overflow:hidden; background:#ffaf00; }

Использование относительного позиционирования для элементов-потомков div , позволяет управлять порядком колонок независимо от их следования в исходной разметке.

#faux div { position:relative; float:left; width:30%; } #faux .main {left:35%} #faux .supp1 {left:-28.5%} #faux .supp2 {left:8.5%}

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

#faux:before, #faux:after { content:""; position:absolute; z-index:-1; top:0; right:0; bottom:0; left:33.333%; background:#f9b6ff; } #faux:after { left:66.667%; background:#79daff; }

Пример кода: множественная обводка

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

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

#borders { position:relative; z-index:1; padding:30px; border:5px solid #f00; background:#ff9600; }

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

#borders:before { content:""; position:absolute; z-index:-1; top:5px; left:5px; right:5px; bottom:5px; border:5px solid #ffea00; background:#4aa929; } #borders:after { content:""; position:absolute; z-index:-1; top:15px; left:15px; right:15px; bottom:15px; border:5px solid #00b4ff; background:#fff; }

Прогрессивные усовершенствованиям и устаревшие браузеры

IE6 и IE7не поддерживают псевдо-элементы CSS 2.1 и игнорируют все объявления:before и:after . Они не будут выводить все усовершенствования, но сохранят основу функционирования.

Внимание при использовании Firefox 3.0

Firefox 3.0 поддерживает псевдо-элементы CSS 2.1, но не поддерживает их позиционирование. Из-за такой частичной поддержки эффекты, которые явно зависят от свойств псевдо-элементов width или height, могут выглядеть ужасно. Нет никакого альтернативного способа для Firefox 3.0, если вы использовали свойства width или height . Иногда некоторые улучшения можно получить при добавлении display:block к стилям псевдо-элемента.

Прежде, чем использовать техники, которые требуют позиционирования псевдо-элементов с помощью свойств width или height, нужно рассмотреть, насколько важно обеспечивать поддержку Firefox 3.0, и процент ваших пользователей, которые используют данный браузер.

Данная проблема полностью решается в приложениях, которые используют абсолютное позиционирование, вместо свойств width или height.

Усовершенствования с помощью CSS3

Все примеры, которые реализованы в данной статье, могут быть улучшены с использованием CSS3.

Использование свойств border-radius , rgba , transforms и множественные фоны CSS3 в сочетании с псевдо-элементами могут открыть возможности для реализации более сложных эффектов. Однако, на текущий момент нет браузеров, которые поддерживают анимации или трансформации CSS3 для псевдо-элементов.

Будущее: псевдо-элементы CSS3

Предполагаемые усовершенствования псевдо-элементов в CSS3 (смотри документ CSS3 Generated and Replaced Content Module) включают связанные псевдо-элементы (::before::before), множественные псевдо-элементы (::after(2)), оборачивающие псевдо-элементы (::outside) и возможность вставлять псевдо-элементы для подгружаемых частей документа (::alternate).

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

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

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

Множество фоновых изображений

Чтобы не создавать блок внутри блока, проще всего дописать одну строчку правил к главному элементу и, таким образом, получим нужный результат. Можно считать это лаконичным вариантам, тем более, избавить от необходимости лишний раз лезть в исходный код. Все будет сделано одними только средствами CSS.

Blockimg{ background: url("img/img2.png"),/*самых верхний фон и дальше последовательно*/ url("img/img3.png"), url("img/img1.jpg"); background-position:370px center, 120px 150px, center center;/*позиция изображений*/ background-repeat: no-repeat;/*повторение рисунка*/ background-color: #444;/*если нужен цвет фона*/ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); margin: 100px auto 15px; box-sizing: border-box; padding: 25px; width:700px; min-height: 300px; } /*сокращенный вариант*/ .blockimg{ background: url("img/img2.png") no-repeat 370px center, url("img/img3.png") no-repeat 120px 150px, url("img/img1.jpg") no-repeat center center; margin: 100px auto 15px; box-sizing: border-box; padding: 25px; width:700px; min-height: 300px; }

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

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

И последняя деталь. Весь код можно сократить, использовав лишь одно универсальное свойство background . В примере кода есть второй вариант где показано, как это делается.

Фоновой рисунок через псевдоэлемент

Также не стоит забывать про альтернативные варианты, как таковыми, являются псевдоэлементы before и after . В их применении есть положительный плюс – изображение можно заносить за край элемента, так чтоб оно не исчезало на границе, а было поверх нее. Такой прием пригодится, если нужно будет сделать что-то вроде 3Д эффекта.

Blockimg{ background: url("img/img1.jpg") no-repeat;/*фон элемента*/ position:relative;/*область позиционирования*/ margin: 200px auto 15px; box-sizing: border-box; padding: 25px; width:700px; min-height: 300px; } .blockimg::before{ background: url("img/img1.png") no-repeat center center; bottom: 0; content: ""; height: 295px; left: 0; position: absolute;/*абсолютное позиционирование*/ right: 0; top: -150px; }

Пояснение. По сути, все очень просто. Главному элементу обычным путем задаем фон. Дальше идет ключевое свойство position: relative; , которое определяет область для перемещения другого элемента, находящегося в главном элементе и имеющем свойство position:absolute; .

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

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

Как задать несколько фонов в CSS

Мы продемонстрируем вам пример, который вполне может пригодиться на практике. Представим, что нам необходимо поместить блок с текстом в рамку. Рамка представляет собой графический файл в формате PNG:

В данной задаче высота текста нам неизвестна - мы не знаем, поместится ли текст полностью в рамку или же выйдет за ее пределы. Из-за этой неизвестной величины мы не можем рисковать, используя исходный рисунок рамки в качестве фона. Но с помощью CSS мы можем заставить эту рамку удлиняться при необходимости. Для этого придется разделить исходный рисунок в графическом редакторе на три части - верх, низ и середину - и сохранить каждый файл отдельно. Вот так:

Верхняя часть рамки

Нижняя часть рамки

Середина рамки

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

Frame { background-image: url(https://goo.gl/tKyzHt), /* верхняя часть рамки */ url(https://goo.gl/SUKymM), /* нижняя часть рамки */ url(https://goo.gl/Km7HVV); /* середина рамки */ background-position: center top, /* позиция верха рамки */ center bottom, /* позиция низа рамки */ center top; /* позиция середины рамки */ background-repeat: no-repeat, /* верх рамки не повторяется */ no-repeat, /* низ рамки не повторяется */ repeat-y; /* середина рамки повторяется по вертикали */ background-size: contain; /* здесь для всех фонов одинаковое значение */ height: auto; /* высота блока зависит от количества содержимого */ width: 400px; /* ширина блока фиксированная */ padding: 30px; /* внутренние отступы блока */ }

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

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

Далее в коде заданы свойства background-position и background-repeat для каждого фона (соблюдается тот же порядок, в котором расположены фоновые рисунки). Да, вы правильно догадались: если это требуется, то через запятую можно указывать значения и других фоновых свойств. А если вам нужно применить одно значение для всех фонов, вы записываете его, как обычно (в нашем случае это свойство background-size: contain).

Что ж, давайте взглянем на результат:

Как видим, рамка расположилась правильно, и теперь она красиво обрамляет содержимое блока. Что же будет, если мы увеличим количество текста в блоке? Смотрим:

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

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

Использование сокращенной записи

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

Background: url(https://goo.gl/tKyzHt) center top / contain no-repeat, /* верх рамки */ url(https://goo.gl/SUKymM) center bottom / contain no-repeat, /* низ рамки */ url(https://goo.gl/Km7HVV) center top / contain repeat-y; /* середина рамки */

Такой вариант выглядит менее громоздко и легче воспринимается.