Jquery Mobile Android - Fixed Full-Screen Background Image

.ui-page background image jQuery Mobile 1.4.3

Add the page id of the page that should have the background to the CSS rule:

 #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%;
}

DEMO

In the demo page1 has the background and page2 does not.

How can I set fixed position Background image in jquery mobile for iPhone app using Phonegap

Ok, so what I did instead was to create a fixed element within the body element of the page.
So it would look like

<body>
   <div id="background"></div>
    ...
</body>

And for the CSS I stated the following:

    #background {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: url(images/bg-retina.jpg) 0 0 no-repeat fixed !important;
    background-size:contain;
}

And this did the trick for me. Hopefully it helps (someone out there :P)

JQuery Mobile, themeroller, gradient background is not full screen

It looks like the background is being applied to the .ui-content element which is not 100% of its container's height. You could either:

make the .ui-content element 100% height or ...
you can set the gradient on the .ui-page element rather than the .ui-content element(s).

I would set the gradient as the .ui-page background like so:

.ui-mobile .ui-page .ui-content {
    background : none;
}
.ui-mobile .ui-page {
    background : /*gradient here*/;
}

Those rules should be specific enough to override the jQuery Mobile stylesheet. Here is a demo: http://jsfiddle.net/YeTdT/

If you need help creating a cross-browser css gradient, see ColorZilla: http://www.colorzilla.com/gradient-editor/

Fullscreen background image not scrolling with content html5 phonegap

Finally solved the issue by using CSS and jQuery. Now it works perfectly.

mypage.html

<link rel="stylesheet" type="text/css" href="css/full-screen.css" />
<script type="text/javascript"  src="js/full-screen.js"></script>

<div data-role="page" data-cache="false">
    <div data-role="header">
    </div>
    <div  class="ui-content"  data-role="content">

        <!-- All content here....... Scrollable content here.... -->
    </div>
    <div data-role="footer">
    </div>
</div>

full-screen.css

body {
    margin-top: 50px;
    margin-bottom: 50px;
    background: none;
    background-attachment:fixed;  
    border: 0px;
}

.ui-page {
    background-color: #373737 !important; /*Any color based on the data-theme selected*/
}

.ui-content {
    background: transparent url(../img/blur-background.jpg);
    background-size : 100% 100%;
}

full-screen.js

$(document).on("pageshow", function(){
     SizeContent();
});
$(window).on("resize orientationchange", function(){
    SizeContent();
});

function SizeContent(){
    var screen = $.mobile.getScreenHeight();
    var header = $(".ui-header").hasClass("ui-header-fixed") ? $(".ui-header").outerHeight() - 1 : $(".ui-header").outerHeight();
    var footer = $(".ui-footer").hasClass("ui-footer-fixed") ? $(".ui-footer").outerHeight() - 1 : $(".ui-footer").outerHeight();
    var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();
    var content = screen - header - footer - contentCurrent;
    $(".ui-content").height(content);
}

Jquery Mobile Android - Fixed Full-Screen Background Image

.ui-page background image jQuery Mobile 1.4.3

How can I set fixed position Background image in jquery mobile for iPhone app using Phonegap

JQuery Mobile, themeroller, gradient background is not full screen

Fullscreen background image not scrolling with content html5 phonegap

Related Topics

Leave a reply