Currently, I have successfully implemented a background using the CSS background-image property. However, I am interested in utilizing the HTML <img> tag instead. The existing code with the background-image property looks like this:
<section className="banner">
<div className="container">
<div className="wrapper">
<p>bla bla content, buttons, etc.</p>
</div>
</div>
</section>
.banner {
display: flex;
align-items: center;
background-size: cover;
height: 428px;
margin-bottom: 11px;
background-color: #000;
background-image: url("/image.jpg");
}
In an attempt to switch to using the <img> tag, I followed a guide from this post and came up with the following structure:
<section className="banner">
<img
alt=""
src={"/image.jpg"}
/>
<div className="container">
<div className="wrapper">
<p>bla bla content, buttons, etc.</p>
</div>
</div>
</section>
.banner {
display: flex;
align-items: center;
overflow: hidden;
position: relative;
height: 528px;
width: 100%;
margin-bottom: 11px;
background-color: #000;
.img {
position: absolute;
object-fit: cover;
min-width: 100%;
max-width: 100%;
z-index: -1;
}
}
Unfortunately, this new implementation does not properly display the content within the wrapper, and cuts off part of the image on the right side. How can I resolve this issue?