CODEWITHSUNDEEP
htmlcss
JobV
JobV

Reputation: 33

Center bottom image CSS and HTML

I'm trying to center bottom the image of the person, also I need to make it responsive. I tried different methods but it seems is not working, could you help me out with this please? I'm attaching an image as a reference. Thanks.

.content-section {
    height: 80vh;
    background-image: url("https://media-exp1.licdn.com/dms/image/C561BAQHkRX0CouHDLw/company-background_10000/0/1575288490228?e=2159024400&v=beta&t=4d6L5ldeRu30uZNDQYydkL_tpLP6AEEx6ATq7LF9WGo");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: grid;
    justify-items: center;
    align-items: center;
}
.content-section img {
    position: absolute;
    width: 50%;
    bottom: EDGE;
}
 <section class="content-section">
        <img class="img-responsive" src="https://pierpoint.com/wp-content/uploads/Manufacturing-Recruitment-Image-RPO-Pierpoint-International-2-min.png">
    </section>

enter image description here

Upvotes: 0

Views: 64

Answers (2)

Caleb Gross
Caleb Gross

Reputation: 383

Try this:

.content-section {
  height: 80vh;
  background-image: url("https://media-exp1.licdn.com/dms/image/C561BAQHkRX0CouHDLw/company-background_10000/0/1575288490228?e=2159024400&v=beta&t=4d6L5ldeRu30uZNDQYydkL_tpLP6AEEx6ATq7LF9WGo");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: grid;
  justify-items: center;
  align-items: center;
}

.content-section img {
  width: 50%;
  display: block;
  margin: auto;

}
<section class="content-section">
  <img class="img-responsive" src="https://pierpoint.com/wp-content/uploads/Manufacturing-Recruitment-Image-RPO-Pierpoint-International-2-min.png">
</section>

Upvotes: 0

Noob Life
Noob Life

Reputation: 580

I prefer to use flex.

.content-section {
    height: 80vh;
    background-image: url("https://media-exp1.licdn.com/dms/image/C561BAQHkRX0CouHDLw/company-background_10000/0/1575288490228?e=2159024400&v=beta&t=4d6L5ldeRu30uZNDQYydkL_tpLP6AEEx6ATq7LF9WGo");
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
.content-section img {
    width: 50%;
}

Learn more on flex here.

Upvotes: 1

Related Questions