Jquery Mobile Android - Fixed full-screen background image?

css jquery-mobile background fixed

33,869

Solution 1

.ui-page {
    background : transparent url(http://www.nasa.gov/images/content/312934main_image_1283-946.jpg) 0 0 no-repeat fixed !important;
    background-size : cover;
}

This changes the background image from the default gradient to an image of your choosing. The background image is applied to the .ui-page elements (the pseudo-pages), covers the whole page, and is fixed so it doesn't scroll with the page.

Here is a demo: http://jsfiddle.net/kKv4s/

Documentation:

background-size: https://developer.mozilla.org/en/CSS/background-size
background-attachment: https://developer.mozilla.org/en/CSS/background-attachment

Here is browser support for background-size: http://caniuse.com/#feat=background-img-opts

Update

You may want to create your CSS rule for the .ui-content element(s) rather than the .ui-page element(s) as the gradient-background for the .ui-content element can overlap the background we're adding to the .ui-page element:

.ui-content {
    background : transparent url(http://www.nasa.gov/images/content/312934main_image_1283-946.jpg) 0 0 no-repeat fixed !important;
    background-size : cover;
}

Here is a demo: http://jsfiddle.net/kKv4s/1/

Solution 2

There is a jQuery plugin that makes fullscreen backgrounds for your website.

http://www.buildinternet.com/project/supersized/

This option may work better for you than CSS because it using javascript to figure out what size the window is and scales the picture to fit it without stretching and distorting your image.

It also seems to have pretty good documentation on how to use it properly.

Solution 3

This Should Work.

     #background {
        background-image: url('grey.png');
        background-position:center; 
        background-repeat: no-repeat;
        width: 100%; 
        height: 100%; 
        position: fixed; 
        z-index: 0; 
         }

       Html:---
       <body>
       <img id="background" />

If u get further problem please share

33,869

Author by

SilentDesigns

Web designer/developer from Wellington, New Zealand.

Updated on July 09, 2022

Comments

SilentDesigns almost 2 years

I'm trying to add a full screen fixed background image to the first page only of a jquery mobile app for Android (I'm also using phonegap).

In a nutshell, I would like the background image to be fullscreen and fixed, while the page content scrolls above it. The background image also needs to scale to the size of different devices.

Here is what I have so far...

<div data-role="page" id="unit-list" data-theme="a"> 

<div id="background">

<div data-role="header" data-theme="b">
    <h1>Header</h1>
</div><!-- /header -->

<div data-role="content" data-theme="a">    

    <ul data-role="listview" data-theme="none">
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
    </ul>

</div><!-- /content -->

</div><!-- /background -->

 </div> <!-- /page -->

With this CSS:

#background {
    background: url(../images/background.png);
    width: 100% !important;
    height: auto !important;
    background-repeat: no-repeat;
    position: absolute;
    z-index: -1;
}

This obviously doesn't work so any nudge in the right direction would be appreciated, thanks in advance.

SilentDesigns about 12 years

Hi Jasper, thanks for your help. This works for scaling the bg image for different devices, but it is not fixed and still scrolls with the page content. Tried adding 'background-attachment: fixed' to .ui-page but that doesn't seem to do anything.. any ideas? Thanks in advance.
Jasper about 12 years

@SilentDesigns It stays stationary for me in Chrome 17. It makes a bit more sense to create a CSS rule for .ui-content instead of .ui-page, see the difference here: jsfiddle.net/kKv4s/1
SilentDesigns about 12 years

Yes, it looks like this works in Chrome and Safari, but unfortunately not in FF or on any of my Android devices. On the mobile devices it is fixed to the top of the screen and is the correct width, but scrolling down to content below the height of the image reveals the transparent background. Strangely it also messes up some of my list items' font formatting (which is not a big deal). Will look into this a bit more and hopefully be able to come up with something.