I've been attempting to recreate a similar design to this website, and while most of it is working smoothly, I'm encountering an issue with using ::before to add a background image as desired.
Below is the code snippet in question:
/* Section */
section {
grid-area: section;
border: 2px solid red;
}
section::before {
content: "";
background: linear-gradient(180deg, rgba(32, 33, 37, 1) 0%, rgba(32, 33, 37, 0) 64%), url(https://zoro.to/images/zoro-bg.jpg) no-repeat center;
background-size: cover;
border: 2px solid gold;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.afterimg {
display: flex;
border: 2px solid blue;
}
#search {
width: 50%;
height: 50%;
}
#image {
max-width: 50%;
height: 100%;
}
#image img {
height: auto;
width: 100%;
}<section>
<div class="afterimg">
<div id="search">
search
</div>
<div id="image">
<img src="https://zoro.to/images/zoro.png" alt="">
</div>
</div>
</section>This setup results in this output. However, my intention was for it to resemble this appearance. I'm puzzled by why the image extends across the entire page instead of being confined to the <section>. Any assistance would be greatly appreciated.