HTML & CSS

Template con immagine di sfondo e footer

by Andrea Spera

Un template semplice con sfondo sul titolo e piè di pagina.
Questa pagina web presenta un layout pulito e moderno, con particolare attenzione alla gestione dello sfondo del titolo e all'allineamento del footer. Lo sfondo del titolo è ottenuto tramite un'immagine adattata dinamicamente grazie all'uso delle proprietà CSS background-size e background-position, che assicurano una copertura uniforme. Il contenitore del titolo mantiene una perfetta leggibilità grazie allo spazio interno (padding) e alla sovrapposizione controllata degli elementi.
Il footer è sempre allineato alla base della pagina, anche nei casi in cui il contenuto sia insufficiente a riempire lo schermo. Questo risultato è ottenuto utilizzando un contenitore principale con margine negativo e uno spazio di riempimento (filler), che compensa l'altezza del footer mantenendolo visibile e ben posizionato.
Codice
<!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>
Output