I am looking to create a visually stunning landing page that covers the entire screen, showcasing a captivating image. However, I have encountered an issue where only a portion of the image is visible due to additional divs being created.
Here is what my React code looks like:
export default props =>
<header className="masthead">
<div className="container">
<h1>CompanyName</h1>
<h2>Company Slogan</h2>
<div className="container">
<h1>Example Text</h1>
</div>
</div>
<div><h1>Hello</h1></div>
</header>
And here is the corresponding 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%;
}