I'm currently facing an issue with positioning an image within a container below a header. The problem lies in the fact that the image extends beyond the header's position, filling up the entire container.
Below is the code snippet I'm working with:
.container {
height: 100vh;
}
.showcase {
background: linear-gradient( rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../img/innovative_background.jpeg);
background-position: center;
background-size: cover;
position: absolute;
width: 100%;
height: 100vh;
background-size: cover;
}
header {
background: rgba(255, 255, 255, 0);
min-height: 65px;
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 20;
transition: 0.35s all ease;
border-bottom: solid #cb5057;
}<div class="container">
<header>
<ul>
<li>link1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Contact Us</li>
</ul>
</header>
<div class="showcase"></div>
</div>I'd like to adjust the image so it only fills the div space up until the header element. Any suggestions or solutions would be greatly appreciated!
Thank you for your help!