Here is an example of a splash screen I have created.
HTML
<div id="spalsh">
<span> <img src="{% static 'dbexplorer/img/loading.gif' %}" style="height: 100px;" > </span>
</div>
CSS
#spalsh{
width: 98%;
height: 100%;
background: rgba(252, 252, 252, 0.67);
z-index: 10000;
position: absolute;
margin: 0px;
padding: 0px;
}
#spalsh span{
position: absolute;
width: 100%;
text-align: center;
top: 60px;
}
If the page height increases dynamically, the splash screen may not cover the full height. I am looking for a solution using PURE CSS without JavaScript to make sure it covers the full height of the page. Can anyone help me with this?
Instructions on how to add an image: