<!DOCTYPE html> <html> <style> body, html { height: 100%; margin: 0; } .bgimg { background-image: url('https://img.freepik.com/free-vector/minimalist-background-with-leaves_23-2148909131.jpg?w=2000'); height: 100%; background-position: center; background-size: cover; position: relative; color: white; font-family: "Courier New", Courier, monospace; font-size: 25px; } .topleft { position: absolute; top: 0; left: 16px; } .bottomleft { position: absolute; bottom: 0; left: 16px; } .middle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } hr { margin: auto; width: 40%; } .main-heading{ color:#000; } </style> <body> <div class="bgimg"> <div class="middle"> <img src="https://i.pinimg.com/originals/00/94/18/009418460183d05cbbff41179436b3eb.gif" width="100px"> <h1 class="main-heading">COMING SOON</h1> <hr> </div> </div> </body> </html>