MAker MAker - 23 days ago 7
HTML Question

Footer cover my loading screen

I made a loading screen on my personal website. While I am testing, I find that the footer will cover my loading screen when I go into the website.

I want my loading screen to cover the entire screen when I go into the website. How can I do that?

This is my code, css and js.

<footer class="cfooter navbar-fixed-bottom text-center" id="cfooter">
<div class="container">
<div class="row">
<div class="col-lg-12">&nbsp;</div>
</div>
<div class="row">
<div class="col-lg-12">&nbsp;</div>
</div>
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4">Powered by <a href="https://www.makercyf.com/" target="_blank">MAker</a></div>
<div class="col-lg-4"></div>
</div>
<div class="row">
<div class="col-lg-12">&nbsp;</div>
</div>
<div class="row">
<div class="col-lg-12">&nbsp;</div>
</div>
</div>
</footer>

#cfooter {
display: block;
border: 1px solid 000000;
height: 100px;
text-align: center;
background-color: #000000;
color: #fff;
font-size: 15px;
}

div.load_screen {
position:fixed;
width: 100%;
height: 100%;
background: white;
}

img.load_screen {
z-index: 9999999;
position: fixed;
left: 50%;
top: 50%;
margin: -27px 0 0 -95px; /* -image-height/2 0 0 -image-width/2 */
background: white;
}

$(function() {
$("div.load_screen").fadeIn("slow")
setTimeout(function() {
$("div.load_screen").fadeOut("slow")
}, 3000);
})


This is the screen that when I go into the website

Answer Source

Add #cfooter {z-index: 1} and add top and left 0.

div.load_screen {
        position:fixed;
        width: 100%;
        height: 100%;
        background: red;
        top: 0;
        left:0;
    }

Here is the working example. I have added red background just to test it: https://jsfiddle.net/o7wd4mfp/4/