How to Float a Background Image Behind Text in HTML

Many websites make extensive use of background images for the entire site, but there are some circumstances in which you may only want a single image to appear in the background, and only in a single position. In these cases, it's helpful to know how to make this single image float in the right place on the page. It can be especially important if you're placing the image behind another page element, such as text, and need to make sure that everything lines up correctly.

Things You'll Need

• Word processor

Instructions

1. Locate the block of text that you would like to float a background image behind in your HTML document.

2. Locate the opening paragraph tag of the text. It should look like this: <p>.

3. Add the following code to the opening paragraph tag, in-between the "p" and the closing bracket -- note that the marks in-between the parenthesis are two single apostrophes, not a pair of quotation marks: style="background-image:URL('');background-repeat:no-repeat;background-position: ;"

4. Add the full URL of the image you want to place behind the text in-between the apostrophes in the parenthesis in the above code. This places the image behind your text, but positions it in the upper left-hand corner of the text block.

5. Add code after the colon following "background-position" to indicate where in the text block you want to position the image. You can use the words "top," "center," "bottom," "left" and "right," in any combination. For example, your code could look like this: background-position:top right; and the image would appear in the top right corner of the paragraph block. Code producing a background image fully centered in the text block would look like this: background-position:center center;.