How to Overlay or Write Text Over a Background Image in Browser Using HTML5 & CSS3 Full Tutorial For Beginners

 

 

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        font-family: 'Source Sans Pro', sans-serif;
      }
      header {
        background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://w3docs.com/uploads/media/default/0001/01/e4ecd8f48ea6eac1f966ccb81cd388241d54c948.jpeg);
        background-size: cover;
        height: 100vh;
      }
      .container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        text-align: center;
      }
      h1 {
        text-transform: uppercase;
        margin: 0;
        font-size: 3rem;
        white-space: nowrap;
      }
    </style>
  </head>
  <body>
    <header>
      <div class="container">
        <h1>Cakes and Fruits</h1>
      </div>
    </header>
  </body>
</html>

Leave a Reply