Vertical center image within an image

Programming HTML-CSS
1

Hi folks!
I have this doubt (I don’t know if its posible) center vertically an image within an image. But still keeping center even if you stretch or shrink the background image.
I been trying with position absolute and relative, but still failing when stretch or shrink the background image.

Main goal:
Keep that “Ford” image in the middle no matter what:

freecodecamp_img
freecodecamp_img1532×210 411 KB

Original Source (I’m trying to recreate this):
Mercadolibre.com.ve

Thanks in advance!

CODEPEN: https://codepen.io/pen/?editors=1100

HTML:

 <div class="bg-img">
    <a class="bg-link" href="#">
      <img class="bg-link-img"          src="https://http2.mlstatic.com/storage/official-stores-images/ford/small_logo201903110837.jpg" alt="official-store-logo">
    </a>
 </div>

CSS:

.bg-img {
  background-image: url(https://http2.mlstatic.com/storage/official-stores-images/ford/background201810311118.jpg);
  height: 4.3em;
  width: 100%;
  height: 250px;
  background-size: cover;
}

.bg-link-img {
  position:relative;
  top: 20%;
}
2

I don’t know if its posible) center vertically an image within an image.

How about this ?

.bg-link-img {
  position: absolute;
  left: 50%;
  top: 15%;
  vertical-align:middle;
}

Edit: Never mind! It doesn’t work if I shrink it. I think you would need to use a standardised way of measurement …either em, % or px etc.

3

Yep, I already try that one. I don’t find the way to reach that goal. Feels weird.

4

Did you look at the image you are using for the background? Try giving the body a background color, I’m not sure if you realize it or not but the image has like 75% white background at the bottom.

5

Try this:
.bg-img {
background-image: url(https://http2.mlstatic.com/storage/official-stores-images/ford/background201810311118.jpg);
height: 4.3em;
width: 100%;
height: 250px;
background-size: cover;
display:flex;
justify-content:center;
align-items:center;
}

.bg-link-img {
margin-top:-50%
}

6

You are right! what a mistake not having that in mind

7

I missed it at first as well. The white part of the image just looks like the body element if you don’t know it.