【问题标题】：Jquery Mobile Android - Fixed full-screen background image?Jquery Mobile Android - 修复全屏背景图像？
【发布时间】：2012-04-10 11:02:59
【问题描述】：

我正在尝试将全屏固定背景图像添加到仅适用于 Android 的 jquery 移动应用程序的第一页（我也在使用 phonegap）。

简而言之，我希望背景图像是全屏且固定的，而页面内容在其上方滚动。背景图片还需要缩放到不同设备的大小。

这是我目前所拥有的......

<div data-role="page" id="unit-list" data-theme="a"> 

<div id="background">

<div data-role="header" data-theme="b">
    <h1>Header</h1>
</div><!-- /header -->

<div data-role="content" data-theme="a">    

    <ul data-role="listview" data-theme="none">
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
    </ul>

</div><!-- /content -->

</div><!-- /background -->

 </div> <!-- /page -->

使用这个 CSS：

#background {
    background: url(../images/background.png);
    width: 100% !important;
    height: auto !important;
    background-repeat: no-repeat;
    position: absolute;
    z-index: -1;
}

这显然不起作用，因此在正确的方向上进行任何轻推将不胜感激，在此先感谢。

【问题讨论】：

标签： css jquery-mobile background fixed

【解决方案1】：

.ui-page {
    background : transparent url(http://www.nasa.gov/images/content/312934main_image_1283-946.jpg) 0 0 no-repeat fixed !important;
    background-size : cover;
}

这会将背景图像从默认渐变更改为您选择的图像。背景图像应用于.ui-page 元素（伪页面），覆盖整个页面，并且是固定的，因此不会随页面滚动。

这是一个演示：http://jsfiddle.net/kKv4s/

文档：

background-size: https://developer.mozilla.org/en/CSS/background-size
background-attachment: https://developer.mozilla.org/en/CSS/background-attachment

这是background-size的浏览器支持：http://caniuse.com/#feat=background-img-opts

更新

您可能希望为 .ui-content 元素而不是 .ui-page 元素创建 CSS 规则，因为 .ui-content 元素的渐变背景可以与我们添加到的背景重叠.ui-page 元素：

.ui-content {
    background : transparent url(http://www.nasa.gov/images/content/312934main_image_1283-946.jpg) 0 0 no-repeat fixed !important;
    background-size : cover;
}

这是一个演示：http://jsfiddle.net/kKv4s/1/

【讨论】：

您好贾斯珀，感谢您的帮助。这适用于缩放不同设备的 bg 图像，但它不是固定的，仍然会随着页面内容滚动。尝试将“背景附件：固定”添加到 .ui-page 但这似乎无济于事..有什么想法吗？提前致谢。
@SilentDesigns 它在 Chrome 17 中对我来说保持静止。为 .ui-content 而不是 .ui-page 创建 CSS 规则更有意义，请参阅此处的区别：jsfiddle.net/kKv4s/1跨度>
是的，看起来这适用于 Chrome 和 Safari，但不幸的是不适用于 FF 或我的任何 Android 设备。在移动设备上，它固定在屏幕顶部并且是正确的宽度，但向下滚动到图像高度以下的内容会显示透明背景。奇怪的是，它还弄乱了我的一些列表项的字体格式（这没什么大不了的）。将对此进行更多研究，并希望能够提出一些建议。

【解决方案2】：

有一个 jQuery 插件可以为您的网站制作全屏背景。

http://www.buildinternet.com/project/supersized/

此选项可能比 CSS 更适合您，因为它使用 javascript 来确定窗口的大小并缩放图片以适应它，而不会拉伸和扭曲您的图像。

它似乎也有关于如何正确使用它的很好的文档。

【讨论】：

【解决方案3】：

这应该可行。

     #background {
        background-image: url('grey.png');
        background-position:center; 
        background-repeat: no-repeat;
        width: 100%; 
        height: 100%; 
        position: fixed; 
        z-index: 0; 
         }

       Html:---
       <body>
       <img id="background" />

如果还有问题请分享

【讨论】：

【解决方案4】：

仅当您尝试使用重复的背景图像并将其设置为固定时才会出现此问题。显然，Android Chrome 中的错误在于同时处理这两个指令。所以解决方法是使用不重复的背景图像，它会正确修复

【讨论】：