3

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

桌面版本: desktop version

手機版: mobile version

.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> 

回答

0

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

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

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

+0

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

+0

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

4

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

body { 
    height: 100vh; 
} 

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

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

相關問題