背景图像拉伸以适应视口之外答案

【问题标题】：background-image stretch to fit beyond viewport背景图像拉伸以适应视口之外
【发布时间】：2017-02-28 00:02:19
【问题描述】：

我有一个需要全屏背景图片的页面。当身体适合视口时，这很好用，我有 html { height: 100%; } 和身体 { 最小高度：100%;填充顶部：70px； ... 背景尺寸：封面； } （顶部填充用于页眉）。当页面变得大于视口时，就会出现问题。主体拉伸到正确的高度，但是背景附件永远不会大于视口的大小。这是一个示例小提琴 [https://jsfiddle.net/xdsgek6t/]。在现场版本中也有一个图像叠加，但在小提琴中你可以很容易地看到径向渐变结束的线，即使我已经告诉它覆盖身体，在这个小提琴中，由于一个孩子，它有 3000 像素高元素。

html { height: 100%; box-sizing: border-box; }
body {
  overflow-y: scroll;
  padding-bottom: 30px;
  padding-top: 70px;
  background-color: #363636;
  min-height: 100%;
	background-color: #1976D2;
	background-image: radial-gradient( circle at top right, #64B5F6 0%, #1976D2 90% );
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: right 70px;
	background-size: cover;
  margin: 0;
  box-sizing: border-box;
}
div.something { height: 3000px; width: 10px; }
header { position: absolute; width: 100%; top: 0; left: 0; height: 70px; z-index: 500; background-color: #ddd; }

<body>
  <header></header>
  <div class="something"></div>
</body>

当页面稍微变大一点时，这看起来真的很奇怪，并且在移动设备上非常明显。

【问题讨论】：

为html添加背景色，body背景将有效地绘制在body背景上。关于 HTML/BODY 上的 bg 是一件有趣的事情。当您在其中任何一个上设置背景时，它会在 HTML 上绘制。所以要有所作为，为它们设置一个规则，不要使用透明作为背景色，但任何纯色都可以...jsfiddle.net/xdsgek6t/2
一些参考添加到我之前的评论：w3.org/TR/css3-background/#root-background
非常有趣，感谢您提供的信息！

标签： css background-image background-size

【解决方案1】：

从html 中删除height: 100%;，它将扩展。如果你在body 上需要min-height: 100%，你可以改用min-height: 100vh，这样就不会依赖html 上的height: 100%

html { box-sizing: border-box; }
body {
  overflow-y: scroll;
  padding-bottom: 30px;
  padding-top: 70px;
  background-color: #363636;
  min-height: 100vh;
	background-color: #1976D2;
	background-image: radial-gradient( circle at top right, #64B5F6 0%, #1976D2 90% );
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: right 70px;
	background-size: cover;
  margin: 0;
  box-sizing: border-box;
}
div.something { height: 3000px; width: 10px; }
header { position: absolute; width: 100%; top: 0; left: 0; height: 70px; z-index: 500; background-color: #ddd; }

<header></header>
<div class="something"></div>

【讨论】：

完美，谢谢。这正是我 100% 使用 html 的原因，所以感谢 100vh 的建议。
@AdamMarr sweet, np.