Atualmente tenho uma página com uma informação, gostaria que após X segundos a imagem do fundo da tela mudasse para outra pré definida (sem loop, apenas mudar e não voltar) Sou iniciante com linguagem HTML e não sei oq posso usar de códigos para fazer a imagem mudar
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=us-ascii"><meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Grandes Estações - Verão</title>
<!-- Favicon -->
<link href="images/ico/apple-touch-icon-144.png" rel="apple-touch-icon-precomposed" sizes="144x144" />
<link href="images/ico/apple-touch-icon-114.png" rel="apple-touch-icon-precomposed" sizes="114x114" />
<link href="images/apple-touch-icon-72.png" rel="apple-touch-icon-precomposed" sizes="72x72" />
<link href="images/ico/apple-touch-icon-57.png" rel="apple-touch-icon-precomposed" />
<link href="https://1.bp.blogspot.com/-pQsdY7vekvw/WUq764SyUJI/AAAAAAAA5Xw/TiFHXXBUvMUVowJ5LnrXomnMkSGErvHsgCKgBGAs/s1600/FI104.gif" rel="shortcut icon" />
<link href="https://1.bp.blogspot.com/-pQsdY7vekvw/WUq764SyUJI/AAAAAAAA5Xw/TiFHXXBUvMUVowJ5LnrXomnMkSGErvHsgCKgBGAs/s1600/FI104.gif" rel="shortcut icon" /><!-- Cierre de Favicon --><!-- Tell the browser to be responsive to screen width --><meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<style type="text/css">body,
html {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
font-family: 'Montserrat', sans-serif;
color: #fff;
background-color: rgba(0, 0, 0, 0.53);
}
html {
background: url('https://www.superpagina.com.br/paginas/ficcao/planeta_terra_queimando.jpg');
background-size: cover;
background-position: center
}
.error {
text-align: center;
padding: 16px;
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%)
}
h1 {
margin: -10px 0 -30px;
font-size: 70px;
margin-bottom: 10px;
}
p {
font-size: 20px;
margin: 8px 0 38px 0;
font-weight: bold
}
input,
button,
input:focus,
button:focus {
border: 0;
outline: 0!important;
}
input {
width: 300px;
padding: 14px;
max-width: calc(100% - 80px);
border-radius: 6px 0 0 6px;
font-weight: 400;
font-family: 'Montserrat', sans-serif;
}
button {
width: 40px;
padding: 14.5px 16px 14.5px 12.5px;
vertical-align: top;
border-radius: 0 6px 6px 0;
color: grey;
background: silver;
cursor: pointer;
transition: all 0.4s
}
a {
color: #beff00;
text-decoration: none;
}
button:hover {
color: white;
background: #9A5C32
}
.fa-arrow-left {
position: fixed;
top: 30px;
left: 30px;
font-size: 2em;
color:white;
text-decoration:none
}
/* MY OLD STUFF
disregard everyhting below
<div class="error-pg">
<div class="error-cont-top" align="center">
<div class="logo-cont">
<div class="logo" align="left">
<a href="baseurl; ?>/index.php">
getCfg('sitename')); ?>
</a>
</div>
</div>
<div class="error-box-code">error->getCode(); ?></div>
</div>
<div class="error-cont-bottom" align="center">
<div class="error-cont-inner">
<div class="error-box" align="center">
<div class="error-box-msg">error->getMessage(); ?></div>
<div class="error-msg-back"></div>
<div class="error-box-msg"></div>
<div class="error-msg-back">
<ul>
<li>
<a href="baseurl; ?>/index.php" ></a>
<p></p>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>*/
/*html{height:100%;background:#494949}
body{background:#393939;margin:0;font-family:Gotham,"Helvetica Neue",Helvetica,Arial,sans-serif}
.logo-cont{padding:25px 30px;margin:0}
.logo-cont .logo{text-align:center;padding:20px 0 0}
.logo-cont a{font-size:45px;font-weight:400;color:#fff;text-decoration:none;display:block}
.error-box-image-inner{width:90px;height:120px;background:#221E1D;border-radius:50%;padding:35px 50px}
.error-box-image-inner img{max-width:100%;width:100%}
.error-box-code{font-size:12em;font-weight:300;color:#fff;padding:10px 20px 20px}
.error-cont-top{background:#393939}
.error-cont-bottom{background:#494949}
.error-cont-inner{padding:30px 20px}
.error-box-msg{font-size:20px;font-weight:600;color:#e2e2e2;text-shadow:none;margin:10px 0 0;padding:10px 0;width:300px;text-align:left}
.error-msg-back{font-size:15px;font-weight:300;color:#e2e2e2;margin:0 0 20px;width:300px;text-align:left}
.error-msg-back ul{margin:0;padding:0 0 0 18px}
.error-msg-back a{color:#eee}
.error-msg-back a:hover,.error-msg-back a:focus{color:#fff}
@media (min-width: 768px) and (max-width: 1024px) {
.error-box-image-inner{width:45px;height:60px;padding:22px 30px}
.error-box-code{font-size:10em}
}
@media (min-width: 400px) and (max-width: 767px) {
.logo-cont{text-align:center;display:inline-block}
.error-box-image-inner{width:45px;height:60px;padding:22px 30px}
.error-box-code{font-size:8em}
}
@media (max-width: 399px) {
.logo-cont{text-align:center;display:inline-block}
.logo-cont a{font-size:38px}
.error-box-image-inner{width:45px;height:60px;padding:22px 30px}
.error-box-msg,.error-msg-back{width:200px}
.error-box-code{font-size:6em}
}*/
</style>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --><!-- WARNING: Respond.js doesn't work if you view the page via file:// --><!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<p></p>
<div class="error">
<h1>#2 - Turbilhão de Chamas</h1>
<p>"A Titã primitiva durante muito tempo foi única, e nenhum ser ou criatura se comparava a ela, suas florestas eram sua vida e criação, eram a sua própria definição de perfeição. Porém, de tanto nada acontecer, e de tanta flor ao mundo trazer, em um certo momento em sua criação, uma leve faísca veio a aparecer. Apesar de ser sua criação, tudo que ela havia criado era parte dela, assim como braços e pernas, e essa faísca levou uma parte de uma floresta conhecida como Wophite a chamas intensas, tão poderosas que fez a grande titã primordial tombar, caída a titã observou um turbilhão formado entre as chamas, era o nascimento de Pyro, a ascenção flamejante. Tão poderosa fora sua criação, quanto a explosão que ocorreu após seu nascimento, o mundo inteiro sentiu sua força, o mundo inteiro queimou, e de tanta dor sentida, Gaia apagou durante muito tempo, ninguém sabe quanto, mas alguns dizem que demorou milênios até a grande titã despertar novamente." - Autor Desconhecido<br />
<br />
<br />
<br />
<a href="https://iceage.com.br"><span style="color:#990000;">Click aqui para voltar ao site</span></a></p>
</div>
</body>
</html>