Add to Favorites
View Layouts
View Profile
Report Layout
Tags: animated, profile, picture, avatar, profile picture, blogs, bulletins, twilight
Description:
Tired of having lame, motionless avatars? Wish you could animate your avatar? Well, I have most of a solution for you! This only works on places you can put CSS in, so your posts and profiles only, basically.
Note that your profile picture should be square and 160x160 or greater.
It is possible to edit the CSS to not have this requirement, though! Thanks to Bela for pointing out how to make it easier with the background-size – just change it however you'd like, now. If you want my recommendation for how to ensure it stays properly fitted (do this twice, once for blogs & bulletins, once for profiles):
- Upload your gif to https://ezgif.com/resize
- Look at the width/height under the image. Whichever one has the bigger number, go down to the input fields and only fill that one in — the first time, you fill it in with 110, the second, fill it in with 160. (This only applies for the default layout, your layout may make the profile image bigger! Consult your local layout wizard for more info.)
- You don't have to use the actual gif that gets outputted, just note down what it says the width and height are.
- Change the numbers for whichever section you're on to match the numbers ezgif outputs.
- With that, it should be perfectly fitted to your gif, and fitted to the default sizes!
Preview:
click on the image for a larger preview
Copy and paste this code into the "About me" section of your Profile to use it.
Caution: This Layout was not inspected by SpaceHey — use it at your own risk.
Comments
Displaying 20 of 705 comments ( View all | Add Comment )
donutgamah
using!!
Raja ⧗⊕
Using !! Thank you so much, additional gratitude to @Lulan for the elaboration
NARA
usingg
jaz ♱
USINGG
agoshiroLOL
using :D
thank you so much!!
✮ Novalyn Solativa ✮
Using
LULAN
this tutorial is hella confusing so let me explain it in a better way.
go to ezgif, take your image and first crop it. choose the "1x1" option, then when you look up at the preview of the image you can drag the square to cut out where you want it to be cropped
next, take the gif you cropped, and put it into the resizing area, there will be width, height etc options. look at the numbers of them all, whatever number is the highest of all of them, change the number to 110 and resize the gif.
after that, take the resized gif, and resize it again, from 110 to 160.
take your 160 sized gif, and upload it to IMGBB, so the gif doesnt give you an error.
Figuring out the code:
.profile-pic:after { background-image: url("PUT YOUR GIF URL HERE/160/160")
Also, change the "110"'s in this part of the code to 160.
{ background-size: cover; width: 110px; height: 110px; } /* blogs, bulletins */
im not saying to put the code chunks i listed on your profile instead, theyre taken out of the code twilight sparkle gave you and I put them in my comment to show you where you needed to change the code
by LULAN; ; Report
Thank you for making it much easier to understand, but it still doesn't seem to work for me. I'll just stick to a static image until I figure it out some other time
by Mr. Puzzlevisions; ; Report
real idk how 2 use it too
by 𓏵 💼 . torin ノ narumitsu ceo ೀ; ; Report
alex_monono
usingggggg
alyssa
using
Matter
using <3
«Lauri»
using!!!!!
d.e.b
usingg!
adri
using !!
komodo
using!!!
タンジェリン
Using<33
GoldWindTheRock
using
AlexHolyMoly
usinn
Raye143
using ^w^
Emilia
using
JiMMY
USING