Different background images jquery mobile

Question

I am trying to set different background images for each page in jquery mobile.

<div data-role="page" id="pageone">...
    </div>

<div data-role="page" id="pagetwo">...
    </div>

As you can see, each page has a different id, so my thought was that i can assign background image for that id (and another image for another id)

#pageone {background: transparent url(URL) repeat center center !important;}
#pagetwo {background: transparent url(URL) repeat center center !important;}

The image is a pattern (really small 7x10 px). But i couldn't do it. For some reason it appears when you load the page (outside the page div) but then it disappears.

Did anyone encounter the same problem and knows what can i do about it?

Ty in advance :)

Answer 1

Ended up using theme roller and importing my theme there. Then duplicated it into swatch bc and d. In my CSS file i changed the color to background image (for each swatch there was a different image) In my html i put:

<div data-role="page" id="pageone" class="ui-page-theme-a">...
</div>
<div data-role="page" id="pageone" class="ui-page-theme-b">...
    </div>

and that for each page i have that have their own background image.