Text on HTML Images: Do it Yourself

The TD Element

The TD element is the Table Data element in a table. The TD element can take background pictures, background color, text, color (for text), tables, the A element for links, Span elements, and other elements. You give background images, text, and links (A elements) to a TD element in the same way that you do for the DIV element.

The Paragraph Element

You can have an image whose picture gives more meaning to a paragraph by making that image the background of the paragraph.

The P element is a block element that is meant to take in text. However, the P element can also take in a background image. Normally the P element begins from the left end of the parent element and ends at the right end of the parent element. So you would need a background picture with a long width. Alternatively, you can have a small image repeated all over the background of the paragraph using CSS. Still, you can reduce the size of the paragraph to fit the size of a smaller image using CSS.

Note: if you have a background-image in a P element, your result has to be such that the viewer can easily distinguish visually between the background image and the text. There has to be contrast between the text and the background image. If the paragraph does not have any text (meaning it has no width and no height), you may not see the background image.

You give a background image to a P element similar to the way you do for a DIV element.

The Header Elements

The header elements are the H1, H2, H3, H4, H5 and H6 elements. The header elements can receive background images. Here, it is the H1 and H2 elements that are of interest, since the other header elements may be too small to show a background image. The Header element normally goes from the left end of the parent element to the right end of the parent element, taking a whole line. You can give it size and position using CSS. A keyword as the H1 and H2 content has greater value for some search engines than the keyword as ordinary text. You can also turn the text of a Header element into a link using the A element.

Note: if you have a background image in a Header element, your result has to be such that the viewer can easily distinguish visually between the background image and the text. There has to be contrast between the text and the background image.

You give a background image to a Header element similar to the way you do for a DIV element.