How to Position or Align 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>
      .container {
        position: relative;
        text-align: center;
        color: #000000;
        font-size: 30px;
      }
      .bottom-left {
        position: absolute;
        bottom: 8px;
        left: 16px;
      }
      .top-left {
        position: absolute;
        top: 8px;
        left: 16px;
      }
      .top-right {
        position: absolute;
        top: 8px;
        right: 16px;
      }
      .bottom-right {
        position: absolute;
        bottom: 8px;
        right: 16px;
      }
      .centered {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    </style>
  </head>
  <body>
    <h2>Positionet Text over an Image</h2>
    <div class="container">
      <img src="https://www.w3docs.com/uploads/media/default/0001/03/faa2b10a44e1d88ddafbf7ab6002ce24659529d4.jpeg" alt="Snow" style="width:100%;">
      <div class="bottom-left">Bottom Left</div>
      <div class="top-left">Top Left</div>
      <div class="top-right">Top Right</div>
      <div class="bottom-right">Bottom Right</div>
      <div class="centered">Center</div>
    </div>
  </body>
</html>

Leave a Reply