In jQM, what is the proper/correct/actual way to set fullscreen CSS image background for Page?

Question

After a long time working on a jQM project, almost complete in functionality. Now working on UI. When I try to set full cover CSS image background for jQM Page, it either doesn't work as expected.

I google/stackoverflow a lot on this matter. To my surprise, there is no official documentation, direct/simple way to solve this problem.

Many suggestion will work for some people and not for others (even all in supported browser). For me, at first I can't get the 100% height, then after some google and help from other programmer, I can get the 100% height but now its bouncing background before and after transition.

The question for this post, is there any correct way/proper way, official way to set jQM Page background image WITHOUT all the PROBLEMs?

I'm sure this correct/proper/actual way can help and benefits many other developers.

Please advice, thank you.

Answer 1

Working example: http://jsfiddle.net/Gajotres/vds2U/51/

Content background image

HTML

<div data-role="page" id="index" data-theme="a" >
    <div data-role="header">
        <h3>
            First Page
        </h3>
        <a href="#second" class="ui-btn-right">Next</a>
    </div>

    <div data-role="content" id="content">

    </div>

    <div data-role="footer" data-position="fixed">

    </div>
</div>  

CSS

#content {
    padding: 0;
    position: absolute !important;
    top : 40px !important; 
    right : 0;
    bottom : 0 !important; 
    left : 0 !important;  
    background:url(http://htc-wallpaper.com/wp-content/uploads/2013/11/bulldog-puppy1.jpg);
    background-size:cover;
    background-repeat:no-repeat;    
}

Read more about this solution here .

Page background image

CSS

.ui-page {
    background:url(http://htc-wallpaper.com/wp-content/uploads/2013/11/bulldog-puppy1.jpg);
    background-size:cover;
    background-repeat:no-repeat;    
}