Write texts on an image in html

<!DOCTYPE html>
<html>

<head>
  <style>
      .text-image {
                    margin: 5%;
                    position: relative;
                    color: #03fc5a;
                  }

      img {
               width: 100%;
               max-width: 100%;
               height: auto;
               min-height: 100%;
            }
      
      .top-left {
                 position: absolute;
                 top: 5%;
                 left: 5%;
                }

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

      .bottom-left {
                 position: absolute;
                 bottom: 5%;
                 left: 5%;
                   }
      
      .top-right {
                 position: absolute;
                 top: 5%;
                 right: 5%;
                 }

      .bottom-right {
                 position: absolute;
                 bottom: 5%;
                 right: 5%;
                 }
  </style>
</head>

  <body>
      <div class="text-image">
        
        <a href="https://v815.blogspot.com" target="_blank"><img src="https://i.ytimg.com/vi/GOhcAuQbGJE/maxresdefault.jpg"/></a>
        
        <p1 class="top-left">This is our top left text.</p1>
        
        <p1 class="center">This is our center text.</p1>
        
        <p1 class="bottom-left">This is our bottom left text.</p1>
        
        <p1 class="top-right">This is our top right text.</p1>
        
        <p1 class="bottom-right">This is our bottom right text.</p1>
     </div>
  </body>

</html>

BREAKING NEWS

Main Menu

Wednesday, May 12, 2021

Write texts on an image in html

No comments

Post a Comment

Pages

Instagram accessToken

BREAKING NEWS

Main Menu

Wednesday, May 12, 2021

Write texts on an image in html

You Might Also Like

No comments

Post a Comment

Pages

Instagram accessToken