Web Design

Home
HTML Tutorials
HTML Quick Tips
HTML Reference Charts
CSS Tutorials
CSS Reference Chart
Online Webmaster Tools
Design/Marketing Articles
Web Glossary
Web Design Software
Web Site Design Made Easy
Way Cool Products
Members Site Info

Site Information

Member Benefits
About This Site
Frequently Asked Questions
Privacy Statement
Copyright Notice
Link Info
Contact

More Boogie Jack Sites

BoogieJack.com
eBook Farming
EasyCool Software
i-Backgrounds.com
i-Webmaster.org

Add a Background Image to a Web Page

Adding a background image to your web page is another easy HTML exercise. It works the same whether you use a full page tile or left border background. The example below assumes you keep the background image in the same directory as your html document. Simply modify the <BODY> tag by adding the following attribute and value: 

<body   background="image_name.jpg"   bgcolor="#ABC123">

Where it says "image_name" you'd enter the actual name of the image you want to use. Be sure to use the correct file extension of either .gif or .jpg -- depending which image file type you're using. The image file name and file extension are both case sensitive, so if your image were actually called... 

sample.JPG

...and you coded it to read... 

sample.jpg or Sample.JPG

...it would not work. The first example wouldn't work because you did not capitalize the .JPG as the original file was named. The second example wouldn't work because you DID capitalize "Sample" rather than type it "sample" as it is named.

Uploading Images

If you upload images to your web site via FTP software, the images should be uploaded in binary mode or they will become corrupted and will not work. Some FTP programs have checkbox to check off for automatic detection. If you can't remember the correct mode to use for files, put a check the automatic detection box.

If you upload images via your browser through a server-side file manager of some sort, these usually feature automatic detection.

Still Specify a Background Color

When you use a background image you should still specify a background color, as in the example above. By specifying a background color similar to the color of the background image your guests will be able to read the text on your page without having to wait for the background to load. And when the background image does load it will be a smoother transition.

My members-only site features hundreds of professional background images to choose from, and no link back is required for their use. You might want to explore the benefits of membership. There's also a multitude of free background images at my BoogieJack.com web site and my i-Backgrounds.com web site, although a link back is required to use images from those resources. Another good option is to make your own unique background images and matching buttons using my highly popular, easy-to-use Background Magic Windows software.