La imagen de fondo de la página se mueve y se estira con el conjunto plegable en JQUERY MOBILE 1.4.0

Question

Tengo un conjunto plegable en mi aplicación móvil jquery, el problema es que cuando agregué una imagen de fondo para la página, ya que me expano, cierre la imagen plegable, la imagen de fondo se estira y se mueve con los platillos, cuando quité estas líneas demi CSS:

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

Este prolem se ha resuelto, pero esto ha causado otro gran problema, lo cual es que cuando expano un plegado y luego lo cierre, el fondo se encogerá "Mover hacia arriba con la colapsibuga" y la parte de la página debajo de este plegable se vuelve sin fondo "Transparente "Esto sucede en dispositivos móviles más que JSFiddle, esta es mi jsfiddle

Por favor, ayúdame, ¿cómo puedo resolver este problema para que los platos se puedan expandir y cerrar sin afectar la imagen de fondo de la página?

Answer 1

Puede dimensionar su contenido al tamaño del dispositivo utilizando JavaScript: http://jqmtricks.wordpress.com/2014/02/06/content-div-height-fill-page-height/

Actualizado 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);   
}