Copy and paste this in your Blog or Web page.

It will look like this.

First we display our 316 x 330 image using the <IMG> tag.

To overlay the Web Site Design Studio text on top of the image we used CSS inline style.

The key when overlaying is the use the position:relative with top and margin-left. We had to tweak the relative positioning a bit to get the text to appear exactly where we wanted it on top of the image. We used the div tag and decided to start the text -300 pixels from the top (our image height is 330). We used a left margin of 10 pixels.

Copy and paste this in your Blog or Web page.

It will look like this.

Example 2

1. Display the image. Our image is 200 x 159.

   <img src="http://www.mandarindesign.com/images/monday.jpg" width="200" height="159">
   

2. Define the position and style of the text. Our image is 200 x 159. We want the text at the top of the image so we backup -159 pixels (our image height is exactly 159). The inline CSS will include
   position:relative;
top:-159px;
color:white;
margin-left:5px;
font-weight:bold;

   <img src="http://www.mandarindesign.com/images/monday.jpg" width="200" height="159"> <div style="position:relative;top:-159px;color:white;margin-left:5px;font-weight:bold;">CSS text on Image</div>
   
   CSS text on Image

CSS Text Over Image: Final Copy-and-Paste

Copy and paste this in your Blog or Web page.

It will look like this.

Relative Positioning: W3.ORG Translation

Once a box has been laid out according to the normal flow, it may be shifted relative to this position. This is called relative positioning.

A relatively positioned box is generated when the 'position' property for an element has the value 'relative'. The offset is specified by the 'top', 'bottom', 'left', and 'right' properties.

w3.org Relative positioning

Positioning is done with boxes. The positioning is easy enough with one image and one line of text, especially if the text is limited to the width of the image. But, let's see what happens if we enter multiple lines of text.

Positioning is done with boxes (that's worth repeating). The div creates a box and the p creates a box. We are putting the pink dotted border around the div so that we can see what the code does. We'll put the yellow dotted border around the paragraphs p that follow our overlay.

The text you are reading here is in a paragagraph that follows the code. It will be positioned downward, farther away from the image than desired.

There are more options. We can define the boundaries and the position of the following paragraph.

• Define the width width:200px;
• Define the paragraph relative position.

CSS text on Image with text that is long and strong. The behavior may or may not be what you are looking for.

position:relative;top:-75px; Where does text below begin? Where we tell it to begin. The top of the paragraph can be calculated and then visually placed where we want it. We are estimating position:relative;top:-75px; (moving it up 75 pixels) from its normal flow.

This is the next paragraph. No positioning specified. It will follow its normal flow. Where does the natural flow place it? Here. Way down here.

Its normal flow is based on the orange text we just typed in. But, the browser doesn't know we used relative positioning for the text (the orange text over the box) so it starts in what would be the normal flow unless we help it by defining a position.