Question

我正在尝试创建一个包含全页背景图片的网站。我已经将其用于桌面版本，但是当我将其推送到github并在我的手机上查看时，背景图像只是顶部的长图像。我正在使用background-size: cover中的css。屏幕截图如下。我如何在移动设备上实现它占用整个空间？谢谢:)）

桌面版

移动版：

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

Answer 1

问题源于您的<body>元素没有适合您设备的高度。您可以在height: 100%上添加html, body，但我认为更简单的方法是添加以下内容：

body {
  height: 100vh;
}

这会将body元素的高度设置为加载时视口高度的100％。我测试了它，它解决了我的Android设备上的问题，并没有在桌面上破解它。

附注：您可以按照how to add records to has_many :through association in rails。

使用Chrome检查器工具调试Android设备

Answer 2

您是否定义了最小高度或最大高度或高度？也许你可以分享Html代码让我查一下。对于背景css，这里是更有用的代码。

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

背景封面不适用于移动设备

2 个答案: