Page background image moves and stretch with colla

Question

I have a Collapsible set in my jQuery mobile app , the problem is that when I added a background image for the Page as I expand , close the collapsible the background image is stretch and moves with collapsibles , When i removed these lines from my css :

background-repeat: no-repeat; 
background-size: 100% 100%;

this prolem has solved but this has caused another big problem which is that when I expand a collapsible and then close it the background will shrink " move to up with the collapsibe "and the page part beneath this collapsible becomes without a background "transparent " this happens on mobile devices more than jsFiddle ,this is my jsfiddle

Please help me how can I solve this Problem So the collapsibles can be expanded and closed without affecting the page background image ?

Answer 1

You can size your content to the device size using javascript: http://jqmtricks.wordpress.com/2014/02/06/content-div-height-fill-page-height/

Updated FIDDLE

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

function SizeContent(){
    var screen = $.mobile.getScreenHeight();
    //if you have a page header
    var header = $(".ui-header").hasClass("ui-header-fixed") ? $(".ui-header").outerHeight() - 1 : $(".ui-header").outerHeight();
    //if you have a page footer
    var footer = $(".ui-footer").hasClass("ui-footer-fixed") ? $(".ui-footer").outerHeight() - 1 : $(".ui-footer").outerHeight();

    /* content div has padding of 1em = 16px (32px top+bottom). This step
   can be skipped by subtracting 32px from content var directly. */
    var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();

    var content = screen - header - footer - contentCurrent;

    $(".ui-content").height(content);   
}