mak :]'s profile picture

Published by

published
updated

Category: Web, HTML, Tech

How to add an intro to your account!

(IF YOU WANT TO CHANGE THE LENGTH OF YOUR GIF, CHANGE THE YOURANIMATION FROM 3 SECONDS!!)


<style>

body:before {
content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed; 
top: 0; 
left: 0; 
z-index: 100;
background-image: url('PUT URL OF GIF HERE');
background-size: cover;
background-repeat: no-repeat;
background-position:center;
animation: yourAnimation 3s ease 0s 1 normal forwards;
pointer-events: none;
}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 

</style>


65 Kudos

Comments

Displaying 20 of 20 comments ( View all | Add Comment )

rosethebabydoll

rosethebabydoll's profile picture

using! <3


Report Comment

Efi✿

Efi✿'s profile picture

I'm sorry I don't know what to put in contect I know you said irl but I sadly don't know what it is


Report Comment



they meant url, as in the link of the intro you wanna put in

by lucid ୭; ; Report

Mikey ☆

Mikey ☆'s profile picture

im super new to html, what do i put in the quotes after 'content:'


Report Comment



u gotta put the irl

by dorkie !!; ; Report

Squeezynutz

Squeezynutz's profile picture

It worked!!! Thank you so much :D


Report Comment



yw!!!!

by mak :]; ; Report

also LOVE ur layouttttttttt

by mak :]; ; Report

Omggg thank you so much!!

by Squeezynutz; ; Report

Omggg thank you so much!!

by Squeezynutz; ; Report

Yours is so prettyyyyy

by Squeezynutz; ; Report

thank you!!!!

by mak :]; ; Report

Gabber

Gabber's profile picture

isnt working :(


Report Comment



paste it at the beginning of your profile code, below the style tag

by ஃ мɨκłớ Ѵ ஃ; ; Report

Alex the bat

Alex the bat's profile picture

Guys, if this isn't working I guess you need to put code before all the other codes, i also had a little problem with this :p


Report Comment

Nocturna

Nocturna 's profile picture

THANK YOUU


Report Comment

rave_dave

rave_dave's profile picture

TYSM


Report Comment

Vanilla

Vanilla's profile picture

TYSM!


Report Comment



OMG DRAKE AND JOSHHHH

by mak :]; ; Report

RubyIsDead

RubyIsDead's profile picture

when I add my intro my grainy computer filter gets removed, how to fix this


Report Comment



same thing happens to me hopefully someone knows how to fix this

by cloud☁︎; ; Report

demn it seems we got the same filter, I saw things online where you can only have one body (if you wanna have another body on top its possible but it’s kinda different), it can be fixed, but I stil can’t understand how it works and if its even the right solution to this certain situation.

by RubyIsDead; ; Report

like I tried making the filter body after and the intro body before, but it seems thats total crap (always trying random shit bc I learn css from experience)

by RubyIsDead; ; Report

Nadalia

Nadalia's profile picture

its zooming into my gif too much how do i fix that


Report Comment

ZAHN X3

ZAHN X3's profile picture

TY


Report Comment

b33fle4f_i

b33fle4f_i's profile picture

omg ty


Report Comment

Shiopoili.

Shiopoili.'s profile picture

tysm!!


Report Comment



how did u get it to workk im struggling

by bluuehair; ; Report

Ep1k.Guy

Ep1k.Guy's profile picture

Thank you so much!!


Report Comment

four/dash

four/dash's profile picture

im gonna repost this onto a layout, and give all credits to you


Report Comment



<333

by mak :]; ; Report

Joe

Joe's profile picture

works awesome thanks!


Report Comment

vivi ✭

vivi ✭'s profile picture

any1 know why it isnt working 4 me??




body:before {
content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background-image: url('https://gfycat.com/alarmedbronzeafricangoldencat.gif');
background-size: cover;
background-repeat: no-repeat;
background-position:center;
animation: yourAnimation 3s ease 0s 1 normal forwards;
pointer-events: none;
}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} }


Report Comment



Sameee how do you get it to work?

by 𝐀𝙡𝙮𝙨𝙨𝙖 †★; ; Report

heres the code i used:


body:before {

content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background-image: url('https://cdn.discordapp.com/attachments/849411743541362688/1114264804086010056/image.png');
background-size: cover;
background-repeat: no-repeat;
background-position:center;
animation: yourAnimation 2s ease 0s 1 normal forwards;
pointer-events: none;

}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} }

by vivi ✭; ; Report

just change the "https://cdn.discordapp.com/attachments/849411743541362688/1114264804086010056/image.png" to whatever image you want

by vivi ✭; ; Report

silly.net

silly.net's profile picture

try making this a layout so more people can find it :)


Report Comment

sigma

sigma's profile picture

thank you sooo much!!! i was wondering how to do this!!!


Report Comment



no problem lmao i had trouble finding out how to do this too so i wanted to make sure others could find out how to do it

by mak :]; ; Report