Как реализовать несколько фоновых изображений для идентификатора/класса с одним и тем же кодом CSS? ⇐ Html

[Anonymous]

У меня есть идентификатор баннера для моего веб-сайта, который выглядит следующим образом для одной из моих страниц:

Код: Выделить всё

#photo-banner {
background-attachment: scroll, fixed;
background-color: #645862;
background-image: url("images/overlay.png"), url("../images/banner3.jpg");
background-position: top left, bottom center;
background-repeat: repeat, no-repeat;
background-size: auto, cover;
color: white;
padding: 7em 4.5em 3em 4.5em;
text-align: center;
}

Атрибуты id элемента в HTML.
Однако это работает только для одной страницы. Если бы я хотел создать еще одну страницу с другим фоновым изображением и теми же настройками, насколько я знаю, мне нужно было бы создать для этого другой идентификатор.
Я думаю, что есть способ с помощью JS/jQuery изменить фоновое изображение в файле HTML, а не в файле CSS, чтобы сэкономить много времени на написании кода.
Или, если есть другой, более оптимальный способ, я тоже был бы очень признателен.

Подробнее здесь: https://stackoverflow.com/questions/275 ... e-same-css