jquery mobile background image

Question

I am building a jQuery mobile site, and I am trying to insert a scalable image into the background, which would adjust to screen size of the phone. This is my code:

Answer 1

Here is how I scale <img> tags. If you want to make it a background image you can set it's position to absolute, place the image where you want (using the: top, bottom, left, right declarations), and set it's z-index below the rest of your page.

//simple example
.your_class_name {
    width: 100%;
    height:auto;
}

//background image example
.your_background_class_name {
    width: 100%;
    height:auto;
    top: 0px;
    left: 0px;
    z-index: -1;
    position: absolute;
}

To implement this you would simply place an image tag inside the data-role="page" element of your page(s) that has the ".your_background_class_name" class and the src attribute set to the image you want to have as your background.

I hope this helps.

Answer 2

my experience:

in some situations the background image url have to be put separately for all page parts - I use:

var bgImageUrl = "url(../thirdparty/icons/android-circuit.jpg)";

...

$('#indexa').live('pageinit', function() {

   $("#indexa").css("background-image",bgImageUrl);
   $("#contenta").css("background-image",bgImageUrl);
   $("#footera").css("background-image",bgImageUrl);
   ...
}

where "indexa" is the id of the whole page, and the "contenta" and "footera" are id-s of the content and footer respectively.

This works for sure in PhoneGap + jQuery Mobile

Answer 3

I think your answer will be background-size:cover.

.ui-page
{
background: #000;
background-image:url(image.gif);
background-size:cover;  
}

Answer 4

just simple replace your class with this.

.ui-page
{
   background: transparent url(images/EarthIcon.jpg) no-repeat center center;
}

I have same issue and i solved it.

Answer 5

Just add !important tag to all css elements in Paolo's answer! Works fine for me JQM+phonegap

EXAMPLE:

body {
    background: url(../images/background.jpg) !important;