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.
.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-sizebackground-attachment
: https://developer.mozilla.org/en/CSS/background-attachmentHere is browser support for background-size
: http://caniuse.com/#feat=background-img-opts
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/