背景圖像出現在屏幕的100％，在桌面上，但無法在手機上

現在看到this screenshot from my mobile device

圖像將始終覆蓋整個屏幕的臺式機，在任何大小的窗口。

但是在手機上，它並沒有覆蓋整個屏幕，爲什麼？

代碼

<h1>Hello</h1>

CSS：

body { 

    margin: 0px; /* Background Image Margin will be 0 */ 
    background-image: url('http://i.imgur.com/lKW3jvz.jpg'); /* Background Image Linki */ 
    background-repeat: no-repeat; /* Background Image Will not repeat */ 
    background-attachment: fixed; /* Background Image will stay fixed */ 
    background-size: cover; /* This will make background image width 100% and height 100% */ 


}

來源

2017-06-17 Josh

的可能的複製[如何使背景圖像覆蓋在手機的整個屏幕（https://stackoverflow.com/questions/44601787/how-製作背景圖像覆蓋整個移動屏幕） –

你的身體不被窗口高度的100％，因此，如果您添加

html, body { 
    height: 100%; 
}

然後，它覆蓋了整個頁面。演示：jsfiddle

來源

2017-06-17 07:49:25 IiroP

U確實身高：100％在小提琴中。小提琴解決方案工作 – Josh

@Josh是的，它應該是'高度'，但它是'寬度'意外 – IiroP

更新下面的CSS

body, html { 
    min-height:100%; 
    height:100%; /* if not working try vh instead of % */ 
}

body, html { 
 
    min-height:100%; 
 
    height:100%; /* if not working try vh instead of % */ 
 
} 
 
body { 
 
\t 
 
\t margin: 0px; /* Background Image Margin will be 0 */ 
 
    background-image: url('http://i.imgur.com/lKW3jvz.jpg'); /* Background Image Linki */ 
 
    background-repeat: no-repeat; /* Background Image Will not repeat */ 
 
    background-attachment: fixed; /* Background Image will stay fixed */ 
 
    background-size: cover; /* This will make background image width 100% and height 100% */ 
 
\t 
 
\t 
 
}

<h1>Hello</h1>

來源

2017-06-17 07:56:43 LKG

背景大小：覆蓋使背景圖像儘可能大的無拉伸它，你可以閱讀一下這裏w3schools：

將背景圖像縮放爲儘可能大，以便背景圖像完全覆蓋背景區域。一些部分背景圖像可能不考慮背景定位區域

的原因是，在移動你的背景是不完整的高度，因爲你的身體標記沒有高度內。

body { 
 
    margin: 0px; /* Background Image Margin will be 0 */ 
 
    background-image: url('http://i.imgur.com/lKW3jvz.jpg'); /* Background Image Linki */ 
 
    background-repeat: no-repeat; /* Background Image Will not repeat */ 
 
    background-attachment: fixed; /* Background Image will stay fixed */ 
 
    background-size: cover; /* This will make background image width 100% and height 100% */ 
 
    height: 100vh; 
 
}

<h1>Hello</h1>

JSFiddle

來源

2017-06-17 08:12:44

背景圖像出現在屏幕的100％，在桌面上，但無法在手機上

回答

相關問題