Блог

У меня есть приложение 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;
 }
  

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

Спасибо!

У вас может быть контейнер div на каждой странице с другим идентификатором или классом и изменить background .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>