Inserire immagine con dimensioni di mezza pagina | Guida creare con i CSS

Inserire immagine con dimensioni di mezza pagina


Vediamo come inserire una immagine con dimensioni di mezza pagina come potete vedere qui:

Pagina web con immagine con dimensioni di mezza pagina

Per ottenere questo risultato nella pagina web bisogna scrivere i seguenti codici html.


Codice HTML

<div class="bg">
 <div class=titolo> Titolo sito</div>
</div>
 <p>Questo è il testo della pagina</p>


Codice CSS

body, html {
 height: 100%;
}



h1, h2, h3, p {
 width: 97%;
}



.bg {
 /* The image used /
 background-image: url("https://www.puntoinformaticofree.it/guida_css/resources/foto/foto5.jpg");
 / Full height /
 height: 50%;
 / Center and scale the image nicely */
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
}



.titolo {
 position: absolute;
 top: 25%;
 left: 50%;
 transform: translate(-50%, -50%);
 text-align: center;
 color: white;
 font-size: 60px;
}