Template con immagine di sfondo e footer
<!DOCTYPE html>
<html>
<head>
<style>
html,body{
height:100%;
width:100%;
font-family: Verdana;
font-size:0;
margin:0;
padding:0;
scroll-behavior:smooth;
}
div#container{
position:relative;
display:block;
width:100%;
min-height:100%;
height:auto;
margin-bottom:-80px;
overflow:hidden;
}
div#titleContainer{
position:relative;
display:block;
width:100%;
height:auto;
text-align:left;
background-image:url("img/template_bg.webp");
background-position:0% 0%;
background-size:100% 100%;
background-repeat: no-repeat;
}
div#title{
position:relative;
display:block;
z-index:2;
font-size:45px;
line-height:60px;
width:80%;
padding:20px 0 20px 5%;
}
div#subtitle{
position:relative;
display:block;
z-index:2;
width:90%;
font-size:30px;
line-height:40px;
padding:0 5% 30px 5%;
}
div#body{
position:relative;
display:block;
font-size:18px;
line-height:28px;
padding:20px 5%;
}
div#fillerBottom{
position:relative;
display:block;
height:120px;
clear:both;
}
div#footer{
position:relative;
display:block;
z-index:2;
min-height:80px;
height:auto;
clear:both;
padding:15px 5%;
font-size:14px;
line-height:32px;
box-sizing: border-box;
background-color:#b0b6b9;
}
</style>
</head>
<body>
<div id="container">
<div id="titleContainer">
<div id="title">
Title
</div>
<div id="subtitle">
Subtitle
</div>
</div>
<div id="body">
Some content ...
</div>
<div id="fillerBottom"></div>
</div>
<div id="footer">
Footer
</div>
</body>
</html>