Question

I have a jQueryMobile app with different HTML pages. Only the first page contains references to the CSS files, because any additional page won’t load the header in jQueryMobile.

In my general style.css file, I do set the background image that way:

.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;
 }

That works but… How do we change the background image in a specific page?

Thanks!

Answer 1

You could have a container div on each page with a different id or class and change the background .onClick() for the specific div.

Example:

<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>