Text On Top Of Image

Occasionally it is desirable to publish text in a specific position on top of an image. The text might be a description, a quote, a copyright notice, a sale price – any text on top of any image.

To publish text on top of an image, put an image in a div and then put the text in another div on top of the first one.

To be more specific:

1. The div with the image.

   This div needs a CSS position declaration that is not position:static. Use position:relative unless another is more appropriate.

   Optionally, the div's height and width are declared to be the same as the image.

2. The div with the text.

   This div needs a CSS position:absolute declaration. Also CSS left and top properties to position the text in a custom spot on top of the image.

   An appropriate div width needs to be declared for the text to be published.

An example is below. Following the example is the example's source code.

Minnesota, USA

The headwaters of the Mississippi river.

Here's the source code of the example. Following it are notes that can be used to customize the source code for your own implementation.

<!-- Image div -->
<div style="
   position:relative; 
   width:300px; 
   height:225px; 
   border:none;">

<img src="//www.willmaster.com/images/lightfocus/headwaters.jpg" 
   style="
      width:300px; 
      height:225px; 
      border:none;" 
   alt="The image below the text">

<!-- Text div -->
<div style="
   position:absolute; 
   left:100px; 
   top:10px; 
   width:200px; 
   font-size:16px;">

<em>Minnesota, USA</em>
<br><br>
The headwaters of the Mississippi river.

</div>
<!-- End of text div -->

</div>
<!-- End of image div -->

As you'll see in the source code, the div with the text is nested within the div containing the image. Doing it this way, the text can be position on top of the image.

The div with the image.

The div with the image has a CSS position:relative declaration. See the purple colored text in the source code of the div's style. If appropriate, position:absolute or position:fixed may be used, instead. CSS Positioning has good CSS positioning information.

Optionally, the div with the image has CSS width and height declarations identical to that of the image. See the orange colored text in the source code for the style attribute of both the div and the image.

The div with the text.

The div with the text has a CSS position:absolute definition. This allows the div to be positioned exactly on top of the image. See the purple colored text in the source code of the div's style.

The position of the text on top of the image is specified with the CSS left and right properties. See the blue colored text.

The div with the text has a CSS width property to specify a width appropriate for the text. See the tan colored text.

Text Over Image

When you want to publish text on top of an image, use the above code. Once you are familiar with it, putting text over images can be done pretty fast.

To become familiar with it, copy the above code and play with it on a test web page. Change the dimensions. Change the text. Change the image.

When you successfully publish text on top of an image, use the "contact" link at willmaster.com and send me the URL. I would like to see what you did with it.

Will Bontrager