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:
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%;
}
K4ushik
September 21, 2021, 1:53am
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.
Yep, I already try that one. I don’t find the way to reach that goal. Feels weird.
lasjorg
September 21, 2021, 3:50am
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.
Didier
September 21, 2021, 3:51am
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%
}
You are right! what a mistake not having that in mind
lasjorg
September 21, 2021, 3:59am
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.
system
Closed
March 22, 2022, 4:00pm
8
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.