Question

我的背景垂直覆盖整个页面时遇到问题，因为现在只有一半。这就是我目前正在做的事情，我不确定它为什么不起作用。

<div class="bg">
  <div class="container">
    some more code here
  </div>
</div>

在我的CSS中我有：

body, html {
 height: 100%;
}

.bg {
 background-image:url(myimage.png);
 background-height: 100%;
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
}

我也尝试过以前帖子中的一些解决方案，但无济于事。

感谢您的时间。

Answer 1

您的bg课程需要height课程，否则它只会与填写它的内容一样高。

此外，background-height不是有效的属性。

body, html {
 height: 100%;
}

.bg {
 height: 100%;
 background-image:url(http://www.fillmurray.com/800/400);
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
}

将图像更改为图像，您应该很好。请参阅随附的小提琴。

https://fiddle.jshell.net/krqvhymn/

您还可以为container课程提供height价值。取决于你想要做什么

Answer 2

不幸的是我无法发表评论，所以我提供这个答案作为进一步的帮助（虽然它没有回答你的问题）：

您可以使用这些背景属性并使用速记将它们全部放在一行中，而不是分隔。那看起来像是：

.bg {
   height: 100%;
   background: url(myimage.png) no repeat cover center;
   }

背景不覆盖整个显示屏？

2 个答案: