(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>
Comments
Displaying 20 of 20 comments ( View all | Add Comment )
rosethebabydoll
using! <3
Report Comment
Efi✿
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 ☆
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
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
isnt working :(
Report Comment
paste it at the beginning of your profile code, below the style tag
by ஃ мɨκłớ Ѵ ஃ; ; Report
Alex the bat
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
THANK YOUU
Report Comment
rave_dave
TYSM
Report Comment
Vanilla
TYSM!
Report Comment
OMG DRAKE AND JOSHHHH
by mak :]; ; Report
RubyIsDead
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
its zooming into my gif too much how do i fix that
Report Comment
ZAHN X3
TY
Report Comment
b33fle4f_i
omg ty
Report Comment
Shiopoili.
tysm!!
Report Comment
how did u get it to workk im struggling
by bluuehair; ; Report
Ep1k.Guy
Thank you so much!!
Report Comment
four/dash
im gonna repost this onto a layout, and give all credits to you
Report Comment
<333
by mak :]; ; Report
Joe
works awesome thanks!
Report Comment
vivi ✭
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
try making this a layout so more people can find it :)
Report Comment
sigma
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