Report Blog Entry
(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 19 of 19 comments ( View all | Add Comment )
Mikey ☆
im super new to html, what do i put in the quotes after 'content:'
Squeezynutz
It worked!!! Thank you so much :D
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 :(
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
Nocturna
THANK YOUU
rave_dave
TYSM
Vanilla
TYSM!
OMG DRAKE AND JOSHHHH
by mak :>; ; Report
RubyIsDead
when I add my intro my grainy computer filter gets removed, how to fix this
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
ZAHN X3
TY
b33fle4f_i
omg ty
Shiopoili.
tysm!!
how did u get it to workk im struggling
by bluuehair; ; Report
♡ ꒰ঌ C.A CUPID !! ໒꒱
tyyy!
Ep1k.Guy
Thank you so much!!
four/dash
im gonna repost this onto a layout, and give all credits to you
<333
by mak :>; ; Report
Joe
works awesome thanks!
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;} }
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 :)
cyb3rst4r
thank you sooo much!!! i was wondering how to do this!!!
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