How to Use Background Images in HTML

Rate: (0 Ratings)

Using a background image in HTML can add great detail to a website and make pages literally jump off the page. The technique to using background images is not very complex, there are a few commands you need to know. You will be working with the <body> tag and adding a few new commands here.

Flag Article

Instructions

Difficulty: Moderately Easy

Things You’ll Need:

Computer
Website
Basic knowledge of HTML
Web page

Step1

Find the <body> tag on the page where you want to use the background image. If the page has no <body> tag, add one right after the </head> tag, which designates the end of the meta data which includes the <title> and keyword and description meta data.

Step2

Type a space after the word body inside the tag. Then add the word background. The new body tag will look like this: <body background>.

Step3

Add an equal sign (=) after the word 'background.' Do not leave a space between the equal sign and the word 'background.'

Step4

Type in the url of the image you want to use as a background after the equal sign. If your image is called backgroundimage.jpg, and it is located at www.yourwebsite.com in the images directory, the new tag will look like this: <body background="http://www.yourwebsite.com/images/backgroundimage.jpg">.

Step5

Upload the new page to the FTP server and check to see that the background image is in place. If not, recheck the url for the image and the code in the <body> tag.

Tips & Warnings

Use smaller images as backgrounds so the page loads faster. You can create these images in any image software program. Remember, the browser will repeat your image over and over again, so you can use a small square to build large backgrounds of repeating square patterns.
Background images can detract from your website if they are too colorful, or make the text hard to read. Use only simple images as a background to improve your site's overall appearance.