NB: LO VORREI METTERE IN TUTTE LE SEZIONI (HOME, CHI SIAMO E INDICE TRANNE SU CONTATTI CHE GIA' E' PRESENTE UN BACKGROUND)
questo è il codice css CHE VA INTEGRATO NELL' HTML:
<html>
<div class="wrapper"></div>
</html>
<style>
.wrapper {
height: 100%;
width: 100%;
left:0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
background: linear-gradient(124deg, #e6f2ff, #cce6ff, #b3d9ff, #99ccff, #80bfff, #66b3ff, #4da6ff, #66b3ff, #80bfff, #99ccff, #b3d9ff);
background-size: 1800% 1800%;
-webkit-animation: rainbow 18s ease infinite;
-z-animation: rainbow 18s ease infinite;
-o-animation: rainbow 18s ease infinite;
animation: rainbow 18s ease infinite;}
@-webkit-keyframes rainbow {
0%{background-position:0% 82%}
50%{background-position:100% 19%}
100%{background-position:0% 82%}
}
@-moz-keyframes rainbow {
0%{background-position:0% 82%}
50%{background-position:100% 19%}
100%{background-position:0% 82%}
}
@-o-keyframes rainbow {
0%{background-position:0% 82%}
50%{background-position:100% 19%}
100%{background-position:0% 82%}
}
@keyframes rainbow {
0%{background-position:0% 82%}
50%{background-position:100% 19%}
100%{background-position:0% 82%}
}
</style>
QUESTO E' QUELLO HTML NELLA QUALE INSERIRE IL BACKGROUND CSS:
<!DOCTYPE html>
<html>
<head>
<script async src=">
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-7948971672916519",
enable_page_level_ads: true
});
</script>
<script src="
https://api.cloudflare.com/client/v4/zones/f2db68f8ac7947b932702dd5fc26eb45/settings/ssl"> </script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="
https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src=">
<script src=">
<script src="
https://kit.fontawesome.com/7773a027fe.j" crossorigin="anonymous"></script>
<title>hardquestion</title>
<link rel="shortcut icon" href="/favi/favicon (6).ico"/>
<style>
* {box-sizing: border-box}
/* Set height of body and the document to 100% */
body, html {
height: 100%;
margin: 0;
font-family: Arial;
}
p{
color:pink;
}
/* Style tab links */
.tablink {
background-color:#2e2e1f;
color: #b3b3b3;
float: left;
border: 0px solid ;
outline: none;
cursor: pointer;
padding: 10px 12px;
font-size: 10px;
width: 25%;
background-color: #1a1a1a;
height: 40px;
}
.tablink:hover {
color: #8c8c8c ;
transition: all 0.3s ease;
}
/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
display: none;
padding: 100px 20px;
height: 100%;
}
/* colori sfondo*/
#1 {background-color: #ffffff;}
#2 {background-color: #ffffff;}
#3 {background-color: #ffffff;}
#4 {background-color: #ffffff;}
/*fa cambiare colore allo sfondo della pagina*/
#Contact { background-image:linear-gradient(125deg,#2ecc71,#27ae60,#3498db,#2980b9,#27ae60,#2ecc71,#2980b9,#3498db); background-size: 400%; animation: bganimation 15s infinite;}
</style>
</head>
<body>
<button class="tablink" onclick="openPage('1', this, 'dimgrey')"id="defaultOpen">Home <span class="glyphicon glyphicon-home" aria-hidden="true"></span></button>
<button class="tablink" onclick="openPage('2', this, 'dimgrey')"> Chi siamo <span class="fas fa-users" aria-hidden="true"></span></button>
<button class="tablink" onclick="openPage('3', this, 'dimgrey')"> Indice <span class="glyphicon glyphicon-book" aria-hidden="true"></span></button>
<button class="tablink" onclick="openPage('Contact', this, 'dimgrey')">Contattaci <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span></button>
<div id="1" class="tabcontent">
</div>
<div id="2" class="tabcontent">
<h3>Chi siamo</h3>
<p></p>
</div>
<div id="3" class="tabcontent">
<h3>Indice</h3>
<p></p>
</div>
<div id="4" class="tabcontent">
</div>
<div id="Contact" class="tabcontent">
<html>
<body>
<link rel="stylesheet" href="inde.css">
<div class="wrapper">
<ul>
<li class="facebook"><i class="fab fa-facebook-f" style='font-size:24px' aria-hidden="true"></i></li>
<li class="instagram"><i class="fab fa-instagram" style='font-size:24px' aria-hidden="true"></i></li>
<li class="whatsapp"><i class="fab fa-whatsapp" style='font-size:24px' aria-hidden="true"></i></li>
</ul>
</div>
</body>
</html>
</div>
<script>
function openPage(pageName,elmnt,color) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent
.style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks.style.backgroundColor = "";
}
document.getElementById(pageName).style.display = "block";
elmnt.style.backgroundColor = color;
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
</body>
</html>
GRAZIE MILLE IN ANTICIPO!