Adding text to images CSS

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 marginproperty 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>
  • CSS, addng text using css, adding text over a picture
  • 0 Users Found This Useful
Was this answer helpful?

Related Articles

What is cPanel?

cPanel is a web based hosting control panel provided by many hosting providers to website owners...

Why do I need web hosting?

Why Do You Need Web Hosting? A lot of people tend to think that registering a domain name is...

How do I find or locate my cPanel login

To gain access to the cPanel you can either type in your web address followed by "/cpanel" and...

Back up using cPanel

Generating and downloading a full backup in cPanel To download the files of a website on cPanel...

Self Signed SSL certificate

What is Self Sign SSL Certificate?   Technically Self Sign Certificate means the...