Making Your Icon a GIF

small tut on how to make your spacehey pfp/icon a gif!

while you technically cant make it a gif outside of your page layout, it still might make a good little addition to your page!

css codes:

1: basic pfp with no effects or border:

in order to get something like this, paste the following css code into your about me!:

<style>

.general-about{

position: relative;

margin-top: 30px;

}

.general-about .details::before{

background: url('DIRECT_GIF_LINK') no-repeat;

content: '';

background-size: 175px;

display: block;

width: 175px;

height: 175px;

z-index: 999;

position: absolute;

top: -9px;

left: -8px;

\\if your gif does not line up to the pfp, use top & left to adjust. this all depends what kind of layout you use!

}

</style>

2: pfp with special effects and borders:

in order to get something like this, paste the following css code into your about me!:

<style>

.general-about{

  position: relative;

  margin-top: 30px;

}

.general-about .details::before{

background: url('DIRECT_GIF_LINK') no-repeat;

content: '';

background-size: 175px;

display: block;

width: 175px;

height: 175px;

z-index: 999;

position: absolute;

top: -26px;

left: -8px;

\\if you are planning to use borders and whatnot, it might displace the gif. so use the top & left in order to move it back to place!

\\the css code below this are the special effects and borders, feel free to delete anything you don't want, or add stuff you want:

border-radius: 20px;

border: 2px solid #648fcc;

box-shadow: 2px 3px 5px #4c7cc0;

margin: 1em 0;

}

</style>

if you need any help, i will try to help in the comments! 💙