How to Put a Background Image on Your Website

Enhance your website by adding a background image.

The basic website page features a plain background, but you can go beyond basic by enhancing your site with a background image. Choose one that complements your site as opposed to one that detracts from it. A bold background image is not pleasing if it makes your website text unreadable. You might resolve this by giving your image a low degree of opacity. CSS gives you a means to add a background image. There are options to display your image once or repeatedly.

Things You'll Need

• HTML or text editor

Instructions

1. Open your document. Insert the following text above your "</head>" tag:

   "<style type="text/css">

   body { background: url("http://www.mysite.com/background.jpg") 50% 50% no-repeat;

   }

   </style>"

2. Ensure the image link matches the location of your image. Note the code after your image. The "50% 50%" are the position properties and cause the image to be centered horizontally and vertically. The "no-repeat" property makes the image display once without repeating.

3. Upload or click on your HTML document to test your page. Modify the properties or image to fit your need.

References

• CSS Background Image Property
• HTML Background Image Code