Report Blog Entry
<style>.profile-pic {
position: relative;
width: 140px;
height: 140px;
}
.profile-pic img {
width: 180px;
height: 160px;
object-fit: cover;
}
.profile-pic::after {
content: "";
position: absolute;
top: -8px;
left: -12px;
right: -12px;
bottom: -8px;
background: url("https://i.postimg.cc/0jKFyC4w/46-Sem-Titulo.png")
center / 100% 100% no-repeat;
pointer-events: none;
z-index: 2;
}
.profile-pic img {
position: relative;
z-index: 1;
}</style>
Why does this code now look weird on my profile?
Comments
Displaying 2 of 2 comments ( View all | Add Comment )
Gold
.profile-pic {
position: relative;
width: 160px;
height: 160px;
}
.profile-pic img {
position: relative;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}
.profile-pic::after {
content: "";
position: absolute;
top: -8px;
left: -12px;
right: -12px;
bottom: -8px;
background: url("https://i.postimg.cc/0jKFyC4w/46-Sem-Titulo.png")
center / 100% 100% no-repeat;
pointer-events: none;
z-index: 2;
}
Gold
Yeah, the weird look is probably because .profile-pic is 140×140, but the image inside is forced to 180×160. So the image overflows the container, while the ::after frame is positioned relative to the smaller 140×140 box. They no longer line up.
Hope it helps if it doesnt work just let me know
by Gold; ; Report