Layout problem: gif and a loadscreen [closed]

that mostly depends on how exactly you set up the loadscreen on your profile vs how you added the gif. would u mind sending ur code for those two things?

This is the loadscreen code:

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

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

And this is the gif code:

.general-about{ position: relative; margin-top: 30px;}

.general-about .profile-pic::before{ content: ''; background: url('https://i.pinimg.com/originals/38/64/d5/3864d5b4243362850b42bf8aa0ac4dd2.gif') no-repeat; background-size: cover; display: block; width: 90px; height: 90px; z-index: 999; position: absolute; top: -40px; left: -25px;}

Also I need to say that I copied both of these elements from other users because I'm not so familiar with css, so I tried my best to find them in their code but I can't promise that I got everything correct.

changed the z-index for the jellyfish to "999px" instead of just 999

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

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

.general-about{
    position: relative;
    margin-top: 30px;
}

.general-about .profile-pic::before{
    content: '';
    background: url('https://i.pinimg.com/originals/38/64/d5/3864d5b4243362850b42bf8aa0ac4dd2.gif') no-repeat;
    background-size: cover;
    display: block;
    width: 90px;
    height: 90px;
    z-index: 999px;
    position: absolute;
    top: -40px;
    left: -25px;
}

Wouldn't have thought that the problem was so trivial. Thank you a lot)

Just to clarify things: I have read about z-index a little bit and it's used for displaying elements on top of each other in certain order, the greater the value of it - the higher on top it will be, but what happens when you add "px" to it? Because it's usually used without this inscryption.

tbh i wrote that when i was sleep deprived so my coding mistake working is surprising o_0

but basically you had your jellyfish at 999 z while your load screen was only at 100 z. the bigger the number the higher the layer. so because i put px in the z-index it probably didn’t read the code as valid and just skipped over it, letting the load screen (which had a valid z-index code) to be on the top layer.

at least that’s my guess XD

Good to know. Thank you again.