添加背景附件时背景图像变得太大：已修复答案

【问题标题】：Background image gets too big when adding background-attachment: fixed添加背景附件时背景图像变得太大：已修复
【发布时间】：2018-01-04 13:00:11
【问题描述】：

在我的网站上，我希望正文滚动到我的标题图像上。使用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/

【问题讨论】：

请在问题的问题陈述中包含所有相关代码，考虑通过提供最小、完整且可验证的示例来改进此问题，请参阅：stackoverflow.com/help/mcve
你试过background-size: 100% 吗？但对我来说，它在 FF 57 中运行良好（掩护）

标签： css background fixed

【解决方案1】：

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

尝试使用background-size: 100% auto;（宽度的100% | auto 将以不会拉伸图像的方式设置高度）

我在您这边进行了测试，并且通过该编辑它可以 100% 工作。

不幸的是，我无法添加截断的代码，因为它将背景调整为 stackoverflows 视口而不是 code-sippets 视口。

【讨论】：