Question

I have a mobile web application based on jQM. I have a background image with the following styles applied to it:

body.ui-mobile-viewport .ui-page
{
    background: url('images/bg-texture.jpg') no-repeat fixed left bottom;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
     background-size: cover;
}

The thing is, this works fine on iOS, Chrome for Android but on ICS native browser and Dolphin browser, the background sticks to the top of the page like this after scrolling starts:

After some action, (like tapping on an element, the background comes back to focus like this:

I checked on the internet, did extensive research but obviously Im missing something. These are the links of the solutions I’ve tried:

• SO link 1
• SO link 2

What you see on top (I mean the CSS) is the default un-edited style applied.

Note:
Ive tried supersized plugin as well, and it works for GingerBread devices and when the content in the page is static.
On ICS devices, I’m not able to scroll beyond the viewport if its applied to a page with dynamic content.
The same problem happens when I try to create an img tag in the body of the page with src set to the path where the image is located.

THESE PROBLEMS OCCUR ONLY ICS NATIVE BROWSER.

Please tell me if I’m doing something wrong. Is there a pure CSS solution for this? (Obviously something is hugely wrong)

Answer 1

Try this:

body.ui-mobile-viewport .ui-page
{
 background: url('images/bg-texture.jpg') no-repeat fixed left bottom; 
 background-size: cover;
}