添加背景图片时背景图片太大-附件:已修复

Question

在我的网站上，我想让body滚动我的标题图像。对于background-attachment: fixed，它是有效的，但是图像变得太大，之后我的标题就不再可读了。换句话说，当我添加background-attachment: fixed时，background-size: cover就不再起作用了。

我很好奇是否有人遇到过这个问题，是否有人有解决这个问题的办法。

下面是我的代码：

.site-header {
   background: url("https://howtogetrippedathome.com/wp-content/uploads/2018/01/How-To-Get-Ripped-At-Home-Header-Image.png") top;
   background-size: cover;
}

PS2，我的网站：https://howtogetrippedathome.com/

Answer 1

background-attachment: fixed将处理图像，就像元素是视口的100%高度和宽度一样。因此，background-size: cover;将调整图像高度以适合视口。

尝试使用background-size: 100% auto; (100% of the width | auto将以不会拉伸图像的方式设置高度)

我在你那一边测试过了，有了这个编辑，它可以100%地工作。

不幸的是，我不能添加代码片段，因为它会将背景大小调整为stackoverflow视区，而不是code-sippets视区。