Prikaz fotografije preko cele stranice, uz mali dodatka tekstualnog sadržaja na sredini stranice se postiže sledećim podešavanjima: potrebno je postaviti za tagove body i html osobinu height na 100%. Ukoliko ne želite prazan prostor oko slike, postaviti margine i padding na 0px.
body, html {
height: 100%;
margin: 0px;
padding: 0px;
}
Slika se postavlja kao pozadina div taga, sa sledećim podšavanjima:
.cover-image {
background-image: url("krofne.jpg");
height:100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Tekst se postavlja unutar posebnog div taga, koji se pozicionira na sredini pomoću apsolutnog pozicioniranja sa vrednostima top i left postavljenim na 50%. Potrebno je dodati transformaciju - translate, da bi se dimenzije samog teksta uzele u obzir pri postavljanju sadržaja na sredni stranice.
.cover-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 40px;
}