WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES
Advertisements

How to position text over an image using CSS

Topic: HTML / CSSPrev|Next

Answer: Use the CSS position property

When creating a photo gallery or something like that you might need to place some caption text or description over the image. You can use the CSS positioning methods in combination with the margin property to position or place the text over an image (i.e. the <img> element).

Let's take a look at the following example to understand how it basically works:

  • <!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:

Advertisements

Your Feedback:

We would love to hear from you, please drop us a line.