图像未完整显示(reactjs，css)

Question

我想显示一个覆盖整个屏幕的图像，就像网站的登录页一样。但图像中唯一显示的部分是由于创建了更多div而延伸的部分。

react代码看起来像这个

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;
}