背景封面不能在移动设备上工作

我正在尝试创建一个具有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

背景封面不能在移动设备上工作

回答

相关问题