How to position text over an image using CSS

Topic: HTML / CSS« Prev|Next »

Answer: Use the CSS position Property

You can use the CSS positioning methods in combination with the margin property to position or place the text over an image, like this:

  • <!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 auto;
  •         left: 0;
  •         right: 0;
  •         top: 40%; /* 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 FAQ

Here are some more FAQ related to this topic:

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.