How to Change a Background Image After a While

Asked

Viewed 220 times

-1

Currently I have a page with information, I would like after X seconds the image of the background of the screen changed to another preset (no loop, just change and do not return) I am beginner with HTML language and do not know where I can use codes to make the image change

<!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>

html background

1 answer

2


You can resolve this using Javascript:

const tempo_de_delay = 5000

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

Remarks:

  1. the value of the variable time_de_delay is in milliseconds, you can edit to any value you want.

  2. put this code at the end of the body to avoid errors.

  3. remember to put the url of the new image.

  4. image exchange occurs instantaneously, but you can edit this in css.

  • How I would make this last background follow the aesthetic patterns of the first?

  • @N3tt0h I believe he should already follow the same pattern, but I think I know what it is. try to edit the: html {&#xA; background: url('https://www.superpagina.com.br/paginas/ficcao/planeta_terra_queimando.jpg');&#xA; background-size: cover;&#xA; background-position: center&#xA;} for: body {&#xA; background: url('https://www.superpagina.com.br/paginas/ficcao/planeta_terra_queimando.jpg');&#xA; background-size: cover;&#xA; background-position: center&#xA;}

  • @N3tt0h in case, change this specific html styling to body. If it doesn’t work just tell me.

Browser other questions tagged html background

You are not signed in. Login or sign up in order to post.