С помощью CSS3 вы можете применить несколько фонов к элементам. Они будут располагаться поверх друг друга: фон, заданный первым – в самом верху, последний фон – в самом низу.
.myclass {
background: background1,
background 2,
...,
backgroundN;
}
Мы можем использовать более одного фонового изображения для элемента, разделяя запятыми несколько фонов в свойстве background или background-image.
Данный код использует сокращённое значение для свойства
background, связывая несколько фоновых картинок вместе. Эти сокращённые значения также могут быть разбиты по свойствам
background-image, background-position и background-repeat со значениями, разделёнными запятыми.
Фон для примера
background: url("images") no-repeat scroll left top/contain,
#f1f1f1 repeating-linear-gradient(transparent, transparent 19px, rgba(128, 0, 0, 0.08) 19px, rgba(128, 0, 0, 0.08) 20px) repeat scroll 0 0;
