HTML CSS

RESPONSIVE FULL-SCREEN BACKGROUND IMAGE

(a quick guide)

<body><main>     <h1>TITLE</h1>     <p>TEXT</p> </main></body>

THE HTML

01

FILL ENTIRE WINDOW body, main {   width: 100vw; min-height: 100vh; }

BACKGROUND IMAGE CSS

02

body {   REMOVE DEFAULT PAGE SPACING   margin: 0; padding: 0;   SET BACKGROUND IMAGE   background-image: url("IMG");   background-size: cover;   background-position: center;   background-repeat: no-repeat; }

FOREGROUND COSMETICS main {   padding: 20px;   color: #fff;   background: rgba(0,0,0,0.5); }

FOREROUND CONTENT CSS

03