<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Perfect Full Page Background Image</title>
 <link rel="stylesheet" href="style.css">
 <link href="https://fonts.googleapis.com/css?family=Concert+One" rel="stylesheet">
</head>
<body>
 <div class="container">
   <div class="contents">
     <h1>SEO Tutorials</h1>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores odit ratione </p>
     <div class="btns">
       <a href="#" class="btn">Start now</a>
     </div>
   </div>
  </div>
</body>
</html>
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

body {
 font-family: sans-serif;
}


.container {
 width: 100%;
 height: 100vh;
 background-image: url("https://www.mywebcode.com/wp-content/uploads/2018/09/freelace-web-developer-mywebcode-mumbai.jpg");
 background-size: cover;
 background-repeat: no-repeat;
 background-color: rgb(0,0,0,.6);
 background-blend-mode: overlay;
 color: #fff;
}

.contents {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 text-align: center;
}

.contents h1 {
 font-family: Concert One;
 font-size: 60px;
}

.contents p {
 margin-top: 15px;
}

.btns {
 margin-top: 25px;
}

.btn {
 display: inline-block;
 padding: 15px 40px;
 text-decoration: none;
 text-align: center;
 background: #FF1493;
 font-size: 19px;
 color: #fff;
 border-radius: 30px;
 box-shadow: 0 0 30px rgba(0,0,0,0.5)
}

External CSS

  1. https://fonts.googleapis.com/css?family=Concert+One

External JavaScript

This Pen doesn't use any external JavaScript resources.