11.12.2019

Две фоновые картинки у блока

Я обычно занимаюсь сопровождением сайтов. Разработкой сайта или интернет-магазина занимаются совсем другие специалисты, найти их можно на сайте компании https://webformula.pro/services/veb-razrabotka/razrabotka-internet-magazinov/.

А я вношу небольшие изменения в готовые сайты по желанию заказчиков.

Недавно возникла необходимость на одном сайте сделать оригинальный стиль для выделения цитаты.

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

Вот, что-то такое, мне предложил заказчик в ТЗ.

Проблем бы не было, если бы все цитаты имели один размер. Нарисовал картинку, сделал фоновой у блока и всё готово.

Здесь же пришлось использовать две разные картинки. Одну для фона справа:

Вторую для фона слева.

В основном все современные браузеры (IE, Cr, Op, Sa, Fx) позволяют добавлять к блоку произвольное число фоновых изображений, все параметры каждого фона просто перечисляются через запятую.

Поэтому в нашем случае достаточно воспользоваться универсальным свойством background. И в описании стилей для блока указать для него вначале один фон, а затем, через запятую, второй.


Пример 1. Два фоновых изображения

<html>
<head>
<title>Два фоновых изображения для блока</title>
<style>
body {
background: #e5e5e5; /* Цвет фона страницы сайта*/
}
.block {
width:250px;
color:red;
background: url(images/left.gif) repeat-y,
#fff url(images/right.gif) repeat-y 100% 0;
padding: 10px 30px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<div class="block">
Уж небо осенью дышало,<br>
Уж реже солнышко блистало,<br>
Короче становился день,<br>
Лесов таинственная сень<br>
С печальным шумом обнажалась...<br>
</div>
</body>
</html>


В итоге получилось вот так:

То есть какой бы высоты не была цитата, она отобразится корректно.

Вот на сегодня и всё.