-1

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&ccedil;&otilde;es - Ver&atilde;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&atilde;o de Chamas</h1>

<p>&quot;A Tit&atilde; primitiva durante muito tempo foi &uacute;nica, e nenhum ser ou criatura se comparava a ela, suas florestas eram sua vida e cria&ccedil;&atilde;o, eram a sua pr&oacute;pria defini&ccedil;&atilde;o de perfei&ccedil;&atilde;o. Por&eacute;m, de tanto nada acontecer, e de tanta flor ao mundo trazer, em um certo momento em sua cria&ccedil;&atilde;o, uma leve fa&iacute;sca veio a aparecer. Apesar de ser sua cria&ccedil;&atilde;o, tudo que ela havia criado era parte dela, assim como bra&ccedil;os e pernas, e essa fa&iacute;sca levou uma parte de uma floresta conhecida como Wophite a chamas intensas, t&atilde;o poderosas que fez a grande tit&atilde; primordial tombar, ca&iacute;da a tit&atilde; observou um turbilh&atilde;o formado entre as chamas, era o nascimento de Pyro, a ascen&ccedil;&atilde;o flamejante. T&atilde;o poderosa fora sua cria&ccedil;&atilde;o, quanto a explos&atilde;o que ocorreu ap&oacute;s seu nascimento, o mundo inteiro sentiu sua for&ccedil;a, o mundo inteiro queimou, e de tanta dor sentida, Gaia apagou durante muito tempo, ningu&eacute;m sabe quanto, mas alguns dizem que demorou mil&ecirc;nios at&eacute; a grande tit&atilde; despertar novamente.&quot; - 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>

1 Resposta 1

2

Você pode resolver isso utilizando JavaScript:

const tempo_de_delay = 5000

setTimeout(() => (
    document.body.style.backgroundImage = "url('https://picsum.photos/600/300')"
), tempo_de_delay)
  

Observações:

  1. o valor da variavel tempo_de_delay é em milisegundos, você pode editar para qualquer valor que desejar.

  2. coloque esse código no final do body para evitar erros.

  3. lembre-se de colocar a url da nova imagem.

  4. a troca de imagem ocorre de forma instantânea, mas pode editar isso no css.

3
  • Como eu faria pra esse ultimo background seguir os padrões de estética do primeiro?
    – N3tt0h
    Commented 18/04/2020 às 17:01
  • @N3tt0h Acredito que ele já deveria seguir o mesmo padrão, mas acho que sei o que é. tenta editar o: html { background: url('https://www.superpagina.com.br/paginas/ficcao/planeta_terra_queimando.jpg'); background-size: cover; background-position: center } para: body { background: url('https://www.superpagina.com.br/paginas/ficcao/planeta_terra_queimando.jpg'); background-size: cover; background-position: center } Commented 18/04/2020 às 17:33
  • @N3tt0h no caso, trocar essa estilização específica do html para o body. Se não funcionar é só me falar. Commented 18/04/2020 às 17:37

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .