jQM 1.4 Page Background Image

by Alex Azuero

HTML

<div data-role="page" id="page1">
     <div data-role="header"  data-position="fixed" data-tap-toggle="false">
        <h1>My page</h1> 
    </div> 	
    <div role="main" class="ui-content">
        <a href="#page2" class="ui-btn">Page 2</a>
    </div> 
     <div data-role="footer" data-position="fixed" data-tap-toggle="false">
         <h1>My page footer</h1>
    </div> 
</div>  

<div data-role="page" id="page2">
     <div data-role="header">
        <h1>My page 2</h1> 
    </div> 	
    <div role="main" class="ui-content">
        <a href="#page1" class="ui-btn">Page 1</a>

    </div> 
</div>

CSS

#page1.ui-page{
    background: url(http://lorempixel.com/1800/1800/abstract/2/) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-size:100% 100%;
}