position:fixed doesnt work for background image in ICS (native browser)

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:

On Scrolling the page

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

O Tap of an element

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

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)

score 0 · Accepted Answer · edited Nov 05 '12 at 10:01

0

Try this:

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

edited Nov 05 '12 at 10:01

Hkachhia

4,463
6
41
76

answered Nov 05 '12 at 09:58

Gopikrishna

857
1
8
14

This doesnt work. This is basically whats there in the question right? or am i missing something? – krishwader Nov 06 '12 at 09:46

score 0 · Answer 2 · answered Aug 08 '15 at 09:32

The following CSS for "html" solves my issues with full page background images on Android devices:

html{
    height:100%;
    width:100%
}

body{
    background-image:url(img/background.jpg);
    background-repeat:no-repeat;
    background-attachment:fixed;
    webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
    }

Hope that helps.

position:fixed doesnt work for background image in ICS (native browser)

2 Answers2