Presentation Image CSS - javascript

Question

I would like to add an image that covers the main page of my website. This image should then disappear after a few seconds. I tried but the image takes the space of the elements under ruining everything. How can I do? Thank you!!!!`

I apologize if I have not immediately provided an example I simply tried to use CSS to make the image disappear

    #fadeout {
    opacity: 1;
    transition: 1s opacity;
    text-align: center;
    font-size:32px;
  }

  p {
    text-align: center;
  }

Then I tried to make the image disappear with javascript:

 window.onload = function() {
  window.setTimeout(fadeout, 3000); 

}

function fadeout() {
  document.getElementById('TEST').style.opacity = '0';
}

Answer 1

Personally I would just do a quick css anim as a simple fake splash loader like;

@keyframes reveal {
 0% {opacity: 1;}
 75% {opacity: 1;}
 99% {opacity: 0;}
 100% {opacity: 0; display: none;}
}

#splash-loader {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background: lightgray url('https://i.imgur.com/bX2Uk7C.jpg') no-repeat center;
  background-size: cover;
  opacity: 0;
  animation: reveal 6s ease forwards;
}


#spinner {
  height: 10rem;
  width: 10rem;
  margin: 5rem auto;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: rgba(255,255,255,.5);
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgaWQ9InNwaW4taWNvbiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMTAwMCA3MDAiIGhlaWdodD0iMzJweCIgd2lkdGg9IjMycHgiPiAgICA8c3R5bGU+ICAgIEAtd2Via2l0LWtleWZyYW1lcyBzcGluTG9hZCB7ICAgICAgdG8geyAgICAgICAgLXdlYmtpdC10cmFuc2Zvcm06IHJvdGF0ZSgzNjBkZWcpOyAgICAgICAgLW1vei10cmFuc2Zvcm06IHJvdGF0ZSgzNjBkZWcpOyAgICAgICAgLW1zLXRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7ICAgICAgICAtby10cmFuc2Zvcm06IHJvdGF0ZSgzNjBkZWcpOyAgICAgICAgdHJhbnNmb3JtOiByb3RhdGUoMzYwZGVnKTsgICAgICB9ICAgIH0gICAgQC1tb3ota2V5ZnJhbWVzIHNwaW5Mb2FkIHsgICAgICB0byB7ICAgICAgICAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7ICAgICAgICAtbW96LXRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7ICAgICAgICAtbXMtdHJhbnNmb3JtOiByb3RhdGUoMzYwZGVnKTsgICAgICAgIC1vLXRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7ICAgICAgICB0cmFuc2Zvcm06IHJvdGF0ZSgzNjBkZWcpOyAgICAgIH0gICAgfSAgICBAa2V5ZnJhbWVzIHNwaW5Mb2FkIHsgICAgICB0byB7ICAgICAgICAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7ICAgICAgICAtbW96LXRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7ICAgICAgICAtbXMtdHJhbnNmb3JtOiByb3RhdGUoMzYwZGVnKTsgICAgICAgIC1vLXRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7ICAgICAgICB0cmFuc2Zvcm06IHJvdGF0ZSgzNjBkZWcpOyAgICAgIH0gICAgfSAgICAgI3NwaW4taWNvbiB7ICAgICAgZmlsbDogZ3JheTsgICAgICBhbmltYXRpb246IHNwaW5Mb2FkIDJzIGxpbmVhciBpbmZpbml0ZTsgICAgICAtd2Via2l0LWFuaW1hdGlvbjogc3BpbkxvYWQgMnMgbGluZWFyIGluZmluaXRlOyAgICB9ICA8L3N0eWxlPiAgPHBhdGggZD0iTTQ2MiA4NTBjLTYgMC0xMS01LTExLTExbDAtMTgzIDAgMGMwLTYgNS0xMSAxMS0xMWw2OSAwYzEgMCAxIDAgMSAwIDcgMCAxMiA1IDEyIDExbDAgMTgzIDAgMGMwIDYtNSAxMS0xMiAxMWwtNjkgMGMwIDAgMCAwLTEgMHogICBtMjUwLTQ3Yy00IDEtOC0yLTEwLTVsLTkxLTE1OCAwIDBjLTQtNi0yLTEzIDQtMTZsNjAtMzRjMC0xIDAtMSAwLTEgNi0zIDEzLTEgMTYgNGw5MSAxNThjMyA2IDIgMTMtNCAxNmwtNjEgMzVjLTEgMS0zIDEtNSAxeiAgIG0tNDI4LTJjLTIgMC00LTEtNi0ybC02MS0zNWMtNS0zLTctMTAtNC0xNmw5MS0xNTdjMCAwIDAgMCAwIDAgMy02IDEwLTggMTYtNWw2MSAzNWM1IDQgNyAxMSA0IDE2bC05MSAxNTdjMCAxIDAgMSAwIDEtMiA0LTYgNi0xMCA2eiAgIG02MjAtMTYzYy0yIDAtNCAwLTYtMWwtMTU3LTkxYzAgMCAwIDAgMCAwLTYtMy04LTEwLTUtMTZsMzUtNjFjNC01IDExLTcgMTYtNGwxNTcgOTFjMSAwIDEgMCAxIDAgNiAzIDcgMTEgNCAxNmwtMzUgNjFjLTIgNC02IDYtMTAgNXogICBtLTgxMC00Yy01IDAtOS0yLTExLTZsLTM1LTYxYy0zLTUtMS0xMiA0LTE1bDE1OC05MSAwIDBjNi00IDEzLTIgMTYgNGwzNSA2MGMwIDAgMCAwIDAgMCAzIDYgMSAxMy00IDE2bC0xNTggOTFjLTIgMS00IDItNSAyeiAgIG03MTItMjM1bDAgMGMtNiAwLTExLTUtMTEtMTFsMC02OWMwLTEgMC0xIDAtMSAwLTcgNS0xMiAxMS0xMmwxODMgMCAwIDBjNiAwIDExIDUgMTEgMTJsMCA2OWMwIDAgMCAwIDAgMSAwIDYtNSAxMS0xMSAxMWwtMTgzIDB6ICAgbS03OTQtNWwwIDBjLTcgMC0xMi01LTEyLTEybDAtNjljMCAwIDAgMCAwLTEgMC02IDUtMTEgMTItMTFsMTgyIDAgMCAwYzYgMCAxMSA1IDExIDExbDAgNjljMCAxIDAgMSAwIDEgMCA3LTUgMTItMTEgMTJsLTE4MiAweiAgIG03NzItMTUzYy00IDAtOC0yLTEwLTZsLTM0LTYwYy0xIDAtMSAwLTEgMC0zLTYtMS0xMyA0LTE2bDE1OC05MWM2LTMgMTMtMSAxNiA0bDM1IDYxYzMgNSAxIDEyLTQgMTVsLTE1OCA5MiAwIDBjLTIgMS00IDEtNiAxeiAgIG0tNTY2LTVjLTEgMC0zIDAtNS0xbC0xNTctOTFjMCAwLTEgMC0xIDAtNS0zLTctMTAtNC0xNmwzNS02MWMzLTUgMTAtNyAxNi00bDE1NyA5MWMwIDAgMCAwIDAgMCA2IDMgOCAxMCA1IDE2bC0zNSA2MWMtMyAzLTcgNi0xMSA1eiAgIG00NjgtMTIxYy0yIDAtNCAwLTYtMWwtNjEtMzVjLTUtNC03LTExLTQtMTZsOTEtMTU3YzAtMSAwLTEgMC0xIDMtNiAxMS03IDE2LTRsNjEgMzVjNSAzIDcgMTAgNCAxNmwtOTEgMTU3YzAgMCAwIDAgMCAwLTIgNC02IDYtMTAgNnogICBtLTM2Ny0yYy00IDAtOC0yLTEwLTZsLTkxLTE1OGMtMy02LTEtMTMgNC0xNmw2MS0zNWM1LTMgMTItMSAxNSA0bDkyIDE1OCAwIDBjMyA2IDEgMTMtNSAxNmwtNjAgMzVjMCAwIDAgMCAwIDAtMiAxLTQgMS02IDJ6ICAgbTE0OS01OGMtNyAwLTEyLTUtMTItMTFsMC0xODMgMCAwYzAtNiA1LTExIDEyLTExbDY5IDBjMCAwIDAgMCAxIDAgNiAwIDExIDUgMTEgMTFsMCAxODMgMCAwYzAgNi01IDExLTExIDExbC02OSAwYy0xIDAtMSAwLTEgMHoiIC8+PC9zdmc+);
}

<div id="splash-loader">
 <div id="spinner"></div>
</div>

<h2>Hey I'm your normal content, howdy</h2>