图像没有完整显示（reactjs，css）

Question

我想显示覆盖整个屏幕的图像，例如网站的登录页面。但是显示图像的唯一部分是因为创建了更多div而延伸出来的部分。

反应代码看起来像这样

export default props =>
  <header className="masthead">
    <div className="container">
        <h1>Comapny Name</h1>
        <h2>Company motto</h2>
        <div className="container">
            <h1> hoiluuluu</h1>
        </div>
    </div>
    <div><h1>hello</h1></div>
</header>

CSS：

header.masthead {
    text-align: center;
    color: white;
    background-image: url("./header-bg.jpg");
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
}

Answer 1

您可以绝对定位最顶层的元素并将其固定到所有边：

示例（CodeSandbox）

header.masthead {
  text-align: center;
  color: white;
  background-image: url("./header-bg.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}