HTML CSS

RESPONSIVE FULL-SCREEN BACKGROUND IMAGE

<!-- BACKGROUND IMAGE --> <div id="back"></div>   <!-- FOREGROUND CONTENT --> <main id="front">   <p>CITY LIFE</p> </main>

THE HTML

01

#back {   z-index: 1;   position: fixed; top: 0; left: 0;   width: 100vw; height: 100vh;   background-image: url("city.jpg");   background-size: cover;   background-position: center;   background-repeat: no-repeat; }

BACKGROUND IMAGE CSS

02

#front {   z-index: 2;   position: absolute; }

FOREROUND CONTENT CSS

03