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

CSS Multiple Backgrounds

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

Вы также узнаете о следующих свойствах:

  • background-size
  • background-origin
  • background-clip

CSS несколько фонов

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

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

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

Пример

Несколько фоновых изображений могут быть указаны с помощью отдельных свойств фона (как указано выше) или background Сокращенное свойство.

В следующем примере используется сокращенное свойство background (тот же результат, что и в примере выше):

Пример

Размер фона CSS

Свойство CSS background-size позволяет задать размер фоновых изображений.

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

В следующем примере размер фонового изображения значительно меньше исходного изображения (с использованием пикселов):

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Пример

Двумя другими возможными значениями для background-size являются contain и cover .

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

Ключевое слово cover масштабирует фоновое изображение таким образом, что область содержимого полностью покрывается фоновым изображением (ширина и высота которого равны или превышают область содержимого). Таким образом, некоторые части фонового изображения могут не отображаться в области фонового позиционирования.

В следующем примере демонстрируется использование contain и cover :

Пример

Определение размеров нескольких фоновых изображений

Свойство background-size также принимает несколько значений для размера фона (с помощью списка с разделителями-запятыми) при работе с несколькими фоновыми рисунками.

В следующем примере задано три фоновых изображения с разным значением размера фона для каждого изображения:

Пример

Полный размер фоновое изображение

Теперь мы хотим иметь фоновое изображение на веб-сайте, который охватывает все окна браузера в любое время.

  • Заполните всю страницу изображением (без пробелов)
  • Масштабирование изображения по мере необходимости
  • Центрировать изображение на странице
  • Не вызывать полосы прокрутки

В следующем примере показано, как это сделать; Используйте элемент HTML (HTML-элемент всегда по крайней мере высота окна браузера). Затем установите фиксированный и центрированный фон на нем. Затем настройте его размер с помощью свойства "размер фона":

Пример

CSS фон-происхождение свойства

Свойство CSS background-origin указывает, где расположено фоновое изображение.

Два фона и больше

В 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).

Вид рамки в браузере Safari

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

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

Множественные фоны в CSS3.

Множественные фоны в CSS3.

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

HTML у нас снова такой же

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

.block <
width: 700px;
height: 400px;
border: 3px solid #999;
margin: 20px;

background-image: url(img1.jpg);
background-repeat: no-repeat;
background-position: bottom center;
>

В background-image мы указываем путь к картинке, в background-repeat — повторять или не повторять картинку, а в background-position мы указываем позицию картинки в блоке: первое значение по горизонтали, второе по вертикали. Значения так же можно задавать в px.

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

.block <
/* . */
background-color: #ccc;
background-image: url(img1.jpg);
background-repeat: no-repeat;
background-position: bottom center;
>

Ещё одно полезное свойство background-attachment, которое позволяет зафиксировать фон в одной позиции независимо от того, как двигается блок.

background-size позволяет изменять размер картинки.

background-size: 50px 200px;

Первое значение по горизонтали, второе по вертикали.

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

Итак, мы разобрали все основы фоновых изображений и теперь поговорим про множественные фоны.

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

background-image: url(img1.png), url(img2.png);

Все наши остальные стили, такие как background-repeat и т.д. будут применены ко всем изображениям. Чтобы задать свои стили для каждого фона, их также нужно перечислить через запятую. Тогда первое значение будет относиться к первому фону, а второе — ко второму.

background-repeat: no-repeat, repeat;
background-position: left bottom, right center;

Так же обратите внимание на то, что первая картинка в background-image будет отображаться выше второй, вторая выше третей и т.д.

В конце следует сказать, что все эти свойства можно объединять в одно свойство background.

background: url(img1.png) left bottom no-repeat, url(img2.png) right center repeat;

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

Комментарии ( 3 ):

Я так понял, что на сайте новый редактор?

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

Спасибо за замечание! Оно обязательно будет учтено.

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *