I have a photo with specific dimensions and I want to create a div box with a button inside the image, similar to what is shown in this example: Example Image
Here is my current code attempt:
.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 my progress so far: Progress Image
However, the image appears stretched out and does not match the design from the figma file provided above.