As a CSS newbie writing a React app, this question may be the easiest one in the history of stackoverflow. I'm trying to make the image element overlap the header instead of pushing it down. In this basic HTML example, the cat image is stretching the header meant to be a cover. What I want is for the image to simply go over it.
This code snippet shows the CSS for the header container and main image:
.headerContainer {
background: url(https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
width: 100%;
min-height: 100vh;
}
.mainImage {
width: 300px;
height: 1500px;
}This is what the HTML layout looks like:
<body style="margin: 0;">
<header class="headerContainer">
<img src="https://images.all-free-download.com/images/graphiclarge/lonely_cat_514201.jpg" class="mainImage" />
</header>
<section>
<p>Lorem Ipsum content here...</p>
</section>
<footer>Made by a dude</footer>
</body>