Picture overlaping with height - html

Question

I have a picture which has certain dimensions, and i need to implementa div with a button inside the pic, as it is on this picture.
I tried this, this is my code.
.wrapper {
width: auto;
text-align: center;
}
.wrapper::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
background: linear-gradient(180deg, rgba(0, 9, 34, 0) 70%, #000922 99.52%);
width: 100%;
height: 100%;
z-index: 10;
}
.background-image {
display: none;
}
.responsive-image {
max-width: 100%;
height: 100%;
}
body {
background: linear-gradient(180deg, rgba(0, 9, 34, 0) 1%, #000922 100%);
}
.button-position {
position: absolute;
bottom: 20%;
left: 15%;
z-index: 200;
}
.cta-button {
padding: 2rem 8rem;
background: linear-gradient(180deg, #1FD660 0%, #127C38 100%);
font-family: Barlow;
color: white;
font-size: 40px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0.2em;
text-align: center;
}
<div class="wrapper">
<img class="img-fluid responsive-image position-relative" src="https://unsplash.com/random" />
<div class="button-position">
<a class="rounded-0 btn cta-button btn-lg btn-block cta-button" href="<?php echo $button['new_template_button_link'] ?>">
Button
</a>
</div>
</div>
This is what i've gotten so far:
But as you can see, its streched out, and it doesnt look as the figma file above

Answer 1

It looks like you're using a library to adjust the image. Remove the classes img-fluid and position-relative from your HTML.
For the purpose of setting a background image, I would create a seperate div and set the background image to your image.
#hero-div {
background-image: url('./image.jpg');
background-repeat: no-repeat;
background-position: center;
object-fit: cover;
}
Nest the button inside the image and position it there.