Javascript 在jQM中，为页面设置全屏CSS图像背景的正确方法是什么？

在一个jQM项目上工作了很长时间后，功能几乎完成了。现在正在处理UI。当我试图为jQM页面设置全封面CSS图像背景时，它或者不能像预期的那样工作

我在这件事上花了很多时间。令我惊讶的是，没有官方文件，没有直接/简单的方法来解决这个问题

许多建议适用于某些人，而不适用于其他人（即使是在支持的浏览器中）。对我来说，一开始我不能得到100%的高度，然后在谷歌和其他程序员的帮助下，我可以得到100%的高度，但现在它的背景在过渡前后都会跳动

这篇文章的问题是，有没有正确的方式/正确的方式，官方的方式来设置jQM页面背景图像而不出现所有问题

我相信这种正确的/恰当的/实际的方法可以帮助并使许多其他开发人员受益

请提供建议，谢谢。

工作示例：

内容背景图像 HTML 阅读有关此解决方案的更多信息

页面背景图像 CSS

---

您好，您的CSS示例可以工作，但有一些小问题。即使页面内容为空，页面也有点可滚动。我怀疑这是因为页眉和页脚在页面的DIV之外是外部的。而且，带有BG图像的页面不是我的多页html文件中的第一页。因此，原因可能是由于在没有页眉和页脚的情况下，对内容高度的错误计算。我想在pageshow活动之前刷新内容分区。这样行吗？如果是，我可以知道刷新内容分区的功能是什么吗？请给出建议，谢谢。你能为这个问题创建一个JSFIDLE吗？嗨@Gajotres，这是我的JSFIDLE解决这个问题：我无法重新生成滚动问题，但它确实在后台显示了一些错误，我也有同样的问题。背景高度计算错误。请告知我的代码中有什么错误。非常感谢。

<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>  

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

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