2017-06-18 71 views
0

我試圖把圖像作爲背景。 在桌面上,它工作得很好,但當我嘗試用我的手機它不起作用。我不明白爲什麼,因爲我把封面作爲背景大小,在移動設備上它應該覆蓋所有的空間。如何用圖像填充移動背景

這是代碼:

CSS

body { 
    background-image: url('/nutickets/images/bluenight.jpg'); 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-size: cover; 
    background-position: center center; 
} 

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta charset="utf-8" /> 
    <link rel="stylesheet" type="text/css" href="/nutickets/style.css"> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head> 

<body> 

</body> 

</html> 

像我的手機上:

enter image description here

如果我檢查機智h Chrome的Toogle設備工具欄一切都正常,但是當我嘗試使用智能手機時無法正常工作。我刷了緩存,我嘗試了隱身,我嘗試了不同的移動瀏覽器,但沒有。

+0

ü可以添加你的形象。我檢查你的代碼,它工作正常。 –

+0

我用我的手機屏幕截圖編輯了答案,我刷新了現金,嘗試用隱身窗口和不同的瀏覽器。 – Matteo

回答

1

這個工作對我來說我的Android設備上 - 請嘗試強制HTML元素覆蓋設備的整個高度:

html { 
    min-height: 100%; 
} 
+0

現在它的工作原理,但我沒有得到它,因爲我不得不使用min-height:100%的HTML – Matteo