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

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

更新

您可能希望創建為你的CSS規則.ui-content元素（S），而不是.ui-page元素（一個或多個）作為梯度背景的.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 個解決方案

解決方案1
9 2012-03-26 22:27:10

更新

解決方案2
2 2012-05-03 16:18:47

解決方案3
2 2013-04-01 06:21:04

解決方案4
0 2013-08-14 04:19:24

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

問題描述

4 個解決方案

解決方案1 9 2012-03-26 22:27:10

更新

解決方案2 2 2012-05-03 16:18:47

解決方案3 2 2013-04-01 06:21:04

解決方案4 0 2013-08-14 04:19:24

解決方案1
9 2012-03-26 22:27:10

解決方案2
2 2012-05-03 16:18:47

解決方案3
2 2013-04-01 06:21:04

解決方案4
0 2013-08-14 04:19:24