更新

Question

我正在尝试将全屏固定背景图片添加到仅适用于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;
}

这显然不起作用，所以在正确的方向上任何推动都会受到赞赏，提前谢谢。

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

Answer 2

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

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

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

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

Answer 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" />

如果您有进一步的问题，请分享

Answer 4

只有在尝试使用重复的背景图像并将其设置为固定时才会出现此问题。显然Android Chrome中的错误在于将这两个指令一起处理。所以修复是使用非重复的背景图像，它将正确修复

Jquery Mobile Android - 修正了全屏背景图像？

4 个答案:

更新