Forum:
Hello! Meant to look around for a second, got distracted, now I'm learning CSS for my profile. Ran into an issue I can't find answers to through searching or the forum:
If I have an image I want to put at my profile picture's position, how would I go about doing that?
Right now it's manually scooted over through negative pixel margins, but, it almost definitely breaks at other resolutions (or at least on mobile!) and it's probably bad form
« Web, HTML, Tech Forum
Image on top of profile picture?
Report Topic
4 Replies
Reply by Pitaden
posted
Figured it out!
Due to weirdness with its implementation, you can't resize an image made in :before or :after in CSS, so I had to make a new one a bit larger than 160px (the profile picture's size)
My issue was, you apparently can't make two elements overlap unless one of them has position: absolute
This snippet overlays a 170-pixel-large image on top of your profile picture:
.profile-pic:after{
content: url("https://64.media.tumblr.com/f9335206e33b8553dcb531a1e7d2fe7b/ae74f8288c65a720-4e/s250x400/6e751abec78c1441d957d275be8750c480577fad.png");
position: absolute;
width: 170px;
height: 170px;
margin-top: -5px;
margin-left: -165px;
}
Permalink
Reply by Pitaden
posted
updated
Did some testing, turns out CSS cannot be applied in forum posts. (understandably so!)
BUT, <hr> does work, so we're in signature business! Yippee!
Reply by test
posted
thank u so much i know nothing about css and ive been trying to do this for WEEKS ily this helped smmmmmm
Reply by psyq9e
posted