背景爲中心的電腦上，而不是在移動

這裏正常顯示是我在CSS中使用的代碼，而這正是我想要它做的移動設備：

html { 
    background-image: url(/wp-content/themes/Newstyle/images/bg.jpg), url(/wp-content/themes/Newstyle/images/bg-repeat.jpg); 
    background-attachment: scroll, scroll; 
    background-color: #000; 
    background-repeat: no-repeat, repeat-y; 
    background-position: center top, center top; 
} 

html, body { 
    width:100%; 
    height:100%; 
}

我不知道我做錯了什麼，我嘗試了幾個修復程序，但我一直無法使它工作。有人可以幫忙嗎？下面的鏈接。

enter image description here

My website - http://renoized.com

來源

2014-09-02 Renoized

您可以嘗試'background-size：100％'嗎？ – khakiout 2014-09-02 13:45:33

您可能會遇到與[此問題]中的用戶相同的問題（http://stackoverflow.com/questions/3183467/css-background-position-not-working-in-mobile-safari-iphone-ipad）。據推測，iOS瀏覽器不支持將「body」標籤的背景圖像置於中心位置......這可能也適用於Android。建議的解決方法是使用包裝並將圖像應用於該包裝。我現在不需要工具來測試它。 – 2014-09-02 13:47:26

@khakiout添加了它，恐怕沒有奏效。 – Renoized 2014-09-02 13:48:11

您可以嘗試兩種：

背景大小：蓋;

或

使用圖像而不是背景，使用絕對定位和-999的z索引值。由於iOS不支持100％寬度的背景圖像。

來源

2014-09-02 13:54:07

第二種方法可以重複圖像嗎？我已經嘗試了第一個，可悲的是，沒有骰子。它改變了圖像，但在桌面上太大而在手機上太小。這很混亂。 – Renoized 2014-09-02 14:00:43

您可以使用媒體查詢來獲得良好的修復。例如，使用媒體查詢來隱藏背景圖片，並在屏幕顯示平板電腦/手機尺寸時取消隱藏上方的圖片修補程序。我希望這很清楚。如果它不讓我知道，那麼我將編寫一個簡碼：D – 2014-09-02 14:44:45

我認爲你描述的方法與我在下面找到的修復非常相似。如果您認爲這會幫助那些發現這個問題的人，那麼可能值得爲未來的堆棧用戶解釋代碼。 – Renoized 2014-09-02 15:18:32

我用來解決這個問題的方法是this，無論它是多麼優雅或不雅，我只是很高興它的工作原理。

我所要做的就是從這裏複製的CSS：

html { 
    background-image: url(/wp-content/themes/Newstyle/images/bg.jpg), url(/wp-content/themes/Newstyle/images/bg-repeat.jpg); 
    background-attachment: scroll, scroll; 
    background-color: #000; 
    background-repeat: no-repeat, repeat-y; 
    background-position: center top, center top; 
}

到我的內容容器標籤，這在我的情況是#page。

這樣做是給內容在正確的位置上自己的背景。它還修復了我在.desktops上出現的問題，如果設備寬度小於內容，背景會移動。<div>

來源

2014-09-02 15:16:20 Renoized

背景爲中心的電腦上，而不是在移動

回答

相關問題