Всем привет! В этой небольшой статье мы с вами разберём, как задать несколько фоновых изображений на CSS3 .
Всем привет! В этой небольшой статье мы с вами разберём, как задать несколько фоновых изображений на CSS3.
HTML у нас снова такой же
<html>
<head>
<title>multibackgrounds</title>
<meta charset="utf-8">
<body>
<div class="block"></div>
</body>
</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-attachment: fixed;
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;
