Как добавить две фоновые картинки к одному элементу?

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

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

Рис. 1. Фоновая картинка для границы слева

Рис. 2. Фоновая картинка для границы справа

В качестве элемента, к которому добавляется фон, воспользуемся <div>, а чтобы отличать его от остальных элементов, к нему добавим класс block (пример 1).

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

Результат данного примера показан на рис. 3.

Рис. 3. Вид блока с двумя фоновыми картинками