背景封面不能在移動設備上工作

我正在嘗試創建一個具有fullpage背景圖片的網站。我已經得到它在桌面版本上的工作，但是當我將它推到github並在手機上查看時，背景圖像只是頂部的一個長圖像。我在我的css中使用background-size: cover。下面的屏幕截圖。如何在移動設備上佔用整個空間？謝謝:)背景封面不能在移動設備上工作

桌面版本：

手機版：

.background1 
{ 
/* Location of the image */ 
background-image: url(images/background-photo.jpg); 

/* Image is centered vertically and horizontally at all times */ 
background-position: center center; 

/* Image doesn't repeat */ 
background-repeat: no-repeat; 

/* Makes the image fixed in the viewpoint so that it doesn't move when 
the content height is greater than the image height */ 
background-attachment: fixed; 

/* This is what makes the background image 
rescale based on itscontainer's size */ 
background-size: cover; 

/* Pick a solid background color that will 
be displayed while the background image is loading */ 
background-color:#464646; 
}

的Html如下

<head> 
<script src="https: 
//ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"</script> 
<script 
src="https://cdn.jsdelivr.net/lodash/4.11.2/lodash.min.js"></script> 
</head> 
<meta charset="utf-8"> 
<title>Color</title> 
<link rel="stylesheet" href="style.css"> 
<link href="animate.css" rel="stylesheet"> 
</header> 

<body id="bodyID" class="background1"> 
</body> 

<script src="javascript.js"></script>

來源

2016-04-26 Francine Jones

您是否定義了最小高度或最大高度或高度？也許你可以分享Html代碼讓我檢查。而對於背景CSS，這裏是更好的有用代碼。

background: #464646 url(images/background-photo.jpg) no-repeat center center; 
background-size: cover;

來源

2016-04-26 03:18:11

嗨，我試過上面的例子，但我的網站中的一些其他功能停止工作。我的網站使用javascript wheel事件循環播放全尺寸的背景圖片，並且它對我改變的某些東西感到憤怒，我不知道爲什麼。無論如何，在body標籤中，類將被交換到css中的不同圖像。告訴我更多關於最小高度和最大高度的信息。 –

住在GitHub這裏http://francinejones.github.io/ –

它工作正常，如果只有與我的HTML和CSS。由於某種原因，我認爲腳本輪功能可能無法正常工作。可能是格式的cos。這是關於最小高度和最大高度。 http://www.w3schools.com/cssref/pr_dim_max-height.asp http://www.w3schools.com/cssref/pr_dim_min-height.asp –

問題源於您的<body>元素沒有適合您的設備的高度。你可以貼在html, body一個height: 100%，但我認爲更簡單的方法來做到這一點是添加以下內容：

body { 
    height: 100vh; 
}

這臺機體元素負載視口高度的100％的高度。我測試了這一點，它解決了我的Android設備上的問題，並沒有在桌面上打破它。

備註：您可以通過以下Google's instructions使用Chrome檢查器工具調試您的Android設備。

來源

2016-04-26 19:14:56

背景封面不能在移動設備上工作

回答

相關問題