How to Include a Graphic With Floating Text in HTML

Normally, when you write HTML code to display an image with text on a Web page, the text wraps around the image to ensure that both are fully visible. However, using inline CSS properties, you can write text that floats on top of an image. By wrapping the "img" and "p" elements in a "div" container to give them a common positioning reference, you can ensure that the text you want will float over the image, no matter where it is on the page.

Instructions

1. Insert the following lines of code into the body of your HTML document where you want the image to appear:

   <div style="position:relative;width:1px;">

   <img style="z-index:-1;" src="image.jpg">

   <p style="position:absolute;left:0px;top:0px;">Floating on Top</p>

   </div>

2. Change the "src" attribute of the "img" element to the URL of the image you want to use.

3. Change the "width" CSS property of the "div" element to reflect the width of your image in pixels. This will ensure that the text wraps to the borders of the image. If you omit this property, the text will continue past the edge of the image and wrap to the page or another container instead.

4. Type your text in the place of the "Floating on Top" text in the "p" element shown in the above example. This text can be stylized like any other text in HTML.