背景图像不再填满屏幕

Question

这个问题最初是在 Wordpress 开发中提出的，但由于它涉及更通用的 CSS 问题，我被要求将其发布在这里。那个线程，以及最初的解释，can be seen here。

---

我有一个background-size: cover 图像设置为用于填充屏幕的单个帖子的标题，内容紧邻下方开始。由于某种原因，它不再这样做了。背景图片本身正在缩放以适应屏幕，但其下方的内容（帖子的文本）是在覆盖的文本之后立即开始的。

你可以明白我的意思in this fiddle。

如果我将#hero-header 设置为position:absolute; min-height: 100%; min-width:100%;，那么当您加载页面时，图像会填满屏幕。那么问题是它下面的内容在顶部运行，而不是从屏幕外开始。

谁能提出解决方案？

---

为了澄清我所说的“填满屏幕”的意思，请按照以下回复：

包含背景图像的 div 在加载时应填满整个屏幕。目前，背景图像正在缩放以适应屏幕，但#hero-header 并未强制其下方的内容离开页面——而是落在其中的文本元素.hero-text 之后。

Answer 1

这已经解决了问题：

背景图片移至html，#hero-header 设置为height: 100vh。