Question

I made a jquery mobile page with multiple data-role=page divs to navigate within the page.

The problem is that I need to keep the same background picture that does not refresh or move when I navigate within the page.

Is there any way to do so?

Answer 1

You can remove the default background from the pseudo page elements and then add your custom background to the body element. This can be done with CSS:

.ui-mobile .ui-page {
    background : transparent;
}
body {
    background : url(...);
}

Here is a demo: http://jsfiddle.net/jasper/feZJ7/2/

This will apply the same background for all pages. You can just target the .ui-mobile .ui-page elements with CSS to change their backgrounds respectively.