html tutorial - How to position text over an image using CSS - html5 - html code - html form



Answer: Use the CSS position Property

    You can use the CSS positioning ways together with the margin property to position or place the text over a picture.

    Example

      <!DOCTYPE html>
      <html lang="en">
      <head>
      <meta charset="UTF-8">
      <title>Placing Text Over an Image in CSS</title>
      <style type="text/css">
          .box{
              position: relative;
              display: inline-block; /* Make the width of box same as image */
          }
          .box .text{
              position: absolute;
              z-index: 999;
              margin: 0 scroll;
              left: 0;
              right: 0;
              top: 50%; /* Adjust this value to move the positioned div up and down */
              text-align: center;
              width: 60%; /* Set the width of the positioned div */
          }
      </style>
      </head> 
      <body>
          <div class="box">
              <img src="images/kites.jpg" alt="Flying Kites">
              <div class="text">
                  <h1>Flying Kites</h1>
              </div>
          </div>
      </body>
      </html>

      Related Searches to How to position text over an image using CSS