Inserire immagine con dimensioni di mezza pagina

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

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;
}