Динамическое изменение фонового изображения в приложении jQueryMobile html5

Question

У меня есть приложение jQueryMobile с различными HTML-страницами. Только первая страница содержит ссылки на файлы CSS, поскольку любая дополнительная страница не загружает заголовок в jQueryMobile.

В моем общем файле style.css я устанавливаю фоновое изображение следующим образом:

.ui-page {
    background: transparent url(../img/iOS/backgroundBanner.jpg);
 }

 @media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ui-page { background-image: url(../img/iOS/backgroundBanner-2x.jpg); 
    -webkit-background-size: 320px 480px;
 }

Это работает, но ... Как мы можем изменить фоновое изображение на определенной странице?

Спасибо!

Answer 1

У вас может быть контейнер div на каждой странице с другим идентификатором или классом и изменить фон .onClick () для конкретного div.

Пример:

<style>
.home {
    background: transparent url(../img/iOS/home_background.jpg);
}
.about{
    background: transparent url(../img/iOS/about_background.jpg);
}
</style>
<div class="home">Home Page</div>
<div class="about">About Us</div>