CODEWITHSUNDEEP
htmlcss
Jovan Jovanovic
Jovan Jovanovic

Reputation: 147

Picture overlaping with height

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: enter image description here

But as you can see, its streched out, and it doesnt look as the figma file above

Upvotes: 0

Views: 49

Answers (1)

Jacob J. Carter
Jacob J. Carter

Reputation: 32

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.

Upvotes: 1

Related Questions