Forum:
It's the last thing I need to make my profile look perfect lol
« Helping each other Forum
Does anyone know a code to add a gif as your "profile picture"?
Report Topic
16 Replies
Reply by ☆herman☆
posted
I haven't tried it a bunch, but it could be possible to trick spacehey's fileuploader (i will get back to you on that)
What you can do is overlay an animated CSS background over your profile picture. i g2g rn, i'll get back to you with the code if you need it. You can try to get it from my profile if im too slow giving you the css
Permalink
Reply by ☆herman☆
posted
Here you go!
.general-about .details::before{
background:
/*PUT YOUR GIF URL INTO THIS THING YO*/ url('https://cdn.discordapp.com/attachments/608396423024738367/947794682698690600/bruh.gif') no-repeat;
content: '';
background-size: 175px;
display: block;
width: 175px;
height: 175px;
z-index: 999;
position: absolute;
top: -10px;
left: -8px;
}
Reply by saturnstellar✧˖*°࿐
posted
Thank you so much! Do I leave it anywhere or a place specific? I hope it doesn't mess with my layout.
Reply by saturnstellar✧˖*°࿐
posted
Reply by ☆herman☆
posted
hmm, weird. did you add it into a < style > tag. I see now that spacehey removed some of the syntax i sent. Here's a pastebin for the styling I use. ChingLiu kat.cr pfp as a placeholder btw (you gotta wait a sec or two before you see the animation)
Sorry probably making no sense yesterday ;Pp i had like 1 hour of sleep.
Reply by not_lain
posted
updated
you can link any images (i believe) with this:
.general-about .profile-pic img {
content: url(your.gif);
}
edit: you can try tinkering with Generic Profile Editor and use the Toggle Selector to see the parts of the layout, the red highlights will appear and right click on wherever. you'll see the name of that area when hovering
edit #2: this only works when viewed on profile and as far as im aware the option is not available yet as an avatar itself
Reply by saturnstellar✧˖*°࿐
posted
Thank you both for your answers! Personally, I tried both and they worked fantastic! Thank you for the support 💜
Reply by Duffin
posted
Reply by Mikimouse
posted
Hey everyone! im new here and im using my MacBook Air. It doesn't show any pictures when im using it, but on my iPhone it shows pictures. can anyone help me with this please?
Reply by Googleplex
posted
@mikimouse maybe use a different browser? i use firefox and the images show up fine
Reply by The Very Least Person
posted
They both worked for me, but the first one caused my profile gif to sit on top of the intro gif that displays fullscreen when you go to my profile. The second, simpler one worked perfectly. Thank you.
Reply by ikaroony
posted
updated
This should work!
<style>
/* gif profile picture */
.profile-pic > img { display:none; }
.profile-pic:after { background-image: url("!!URLHERE!!"); display: inline-block; content:"" }
.general-about .profile-pic:after { background-size: cover; width: 160px; height: 160px; }
.profile-pic:after{
box-shadow: none!important
}
</style>
this might make the picture a circle tho! i don't know how to not do that... sorry :(
Reply by strwbrrybat
posted
hi!! i found this layout which also gives you a tutorial on how to do so, thank the creator!
https://layouts.spacehey.com/layout?id=1796
Reply by kalista
posted
If you go into groups, you should be able to find the HTML group and it has an entire guide for layouts and html codes
Reply by 𝚡♡𝚡.𝚂𝚑𝚒𝚗_𝚃𝚜𝚞𝚔𝚒𝚖𝚒.𝚡♡𝚡
posted
Reply by Athan
posted
Here's the code that I use!
<!-- (c) Layout created by Twilight Sparkle (https://layouts.spacehey.com/layout?id=1796) -->
<!-- REPLACE THE URL WITH YOUR UPLOADED GIF -->
<style>
.profile-pic > img { display:none; }
.profile-pic:after { background-image: url("https://i.pinimg.com/originals/7c/0c/b0/7c0cb02421d63cd26523c1d489dcbd81.gif"); display: inline-block; content:"" }
.blog-entry .profile-pic:after, .bulletin .profile-pic:after { background-size: cover; width: 110px; height: 110px; } /* blogs, bulletins */
.general-about .profile-pic:after { background-size: cover; width: 160px; height: 160px; } /* profile */
</style>