HTML Tutorials

Background Images

So, you want a
Background Image?

HTML Tutorials
By Jeffrey J. Walters

Constructing the Image:

      Background images are a great way to spice up your web pages. All you need is a paint program such as Paint Shop Pro and a good eye for color. If you don't have a paint program, you can always get some free graphics off of the web. Just search for "free web grahics" on Google.com.

      We start by creating a new graphic image. The size is really up to you. I would recommend something around 100 pixels by 100 pixels like the one used in this page. The idea behind this is that we are going to let the browser "tile" or repeat the image both horizontally and vertically to fill the page. If your image is very detailed and needs a lot of colors than save it as a JPG file. Otherwise, if you can reduce the colors to 256 or under and it's not very detailed then save it as a GIF file. For example, a picture of you and your dog would be better saved as a JPG file. The image for this page was saved as a GIF file.

Click here to view this page's 'image.gif' image.

The <body> Command:

      Once you have your background image, you need to modify your <body> command to include the background. Below is an example using "image.gif" as the background filename.


<BODY BACKGROUND="image.gif">

       That's all there is to it. Now just FTP transfer (or HTTP is your service provides it) your image file and your HTML page file over to your home page directory and your done.

       Just a couple notes on background images. Backgrounds can either make or break your web page. Always keep your background images as small as possible so your page loads fast. If possible, make the opposite edges "match-up"; like on this page. Keep the colors toned down, some colors may make it hard to read the page's text.


Link to this Tutorial!

Did you find this tutorial helpful? If so, please help me to share it with others by linking to it. Just place the HTML code below onto your own Web page to create a link to this tutorial.


Bookmark this Tutorial!

Bookmark this tutorial page on your favorite Social Bookmarking site.





[ Page Created December 6, 1997 ] [ Last Updated May 24, 2008 ]
Copyright ©1997-2014 Jeffrey J. Walters. All rights reserved.