Animate your profile picture (works on profiles, blogs, and bulletins!)

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

Code:

<!-- (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("http://placekitten.com/g/160/160"); 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>

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 767 comments ( View all | Add Comment )

Azir	1785574961 Usando, Thank you T-T Report Comment
Jerry 🌈	1785521755 Using :) Report Comment
Curly	1785391587 Using Report Comment
𝚂𝚝𝚎𝚕𝚕𝚊 ⊹	1785265190 using! Report Comment
𝄞 𝘚𝘰𝘭𝘢𝘪𝘳𝘦 .ᐟ 🌸	1784952235 Using Report Comment
ailuu	1784940248 using Report Comment
XTORT	1784865911 Very useful during the pfp bug thing, thanksies, using !!! Report Comment
aleri0n__	1784559602 usingg Report Comment
✙⠀⠀ ͝ cucaloc4 (mizuki 1# yume)	1784342506 Using Report Comment
⋆.˚✮𝑳𝒆𝒗✮˚.⋆ 🇦🇷	1784040895 using Report Comment
⋆.˚✮𝑳𝒆𝒗✮˚.⋆ 🇦🇷	1784040890 using Report Comment
†ⴕ𝔥𝔬𝔪𝔞𝔰 ࣪˖ ִֶ♱ ྀིྀ	1783888742 USINGGG, ILY, U SAVED MY LIFE :sob: Report Comment
P+HATE	1783869871 Using! Report Comment
A Lot Of Bread ! !	1783778857 Using prolly!! Report Comment
⊹ ✧ ˖ sunny	1783746804 using!! thank you Report Comment
Sammie (￣ω￣;)	1783505323 using Report Comment
kalashnicola☭	1783492504 usingg! Report Comment
showaah	1783290217 Using Report Comment
CathyDessIbukiAqua	1783090478 using thoo Report Comment
s.erenez_ 🪷	1782974705 using Report Comment