This page: GRAPHICS: Making a Background.

SURFING IN THE DARK ...A Beginner's Odyssey
1. INTRO,
RESOURCES,
TOOLS		 2. HTML BASICS 5. TABLES 8. JAVA SCRIPT
3. APPLYING HYPERTEXT 6. GRAPHICS .
4. COLOR 7.COUNTERS .

SIMPLE BACKGROUND CONSTRUCTION

(If you're viewing a hard copy, you may find this article on the
internet at URL: http://www.primeshop.com/html/jumpidx.htm )

You're invited to visit the Primeline Website at http://www.primeshop.com/ Come see us!

The background on this page is a homemade creation that took about 15 minutes to make. We'll teach you how.

HOW BACKGROUNDS WORK

Any image will work as a browser background. (See html basics - it's the image called "BACKGROUND="image.jpg -or -gif" in the <BODY...> tag.)

When given a background image, the browser automatically tiles the image until the screen is full. That is, you specify it once in the <BODY> tag, and the browser stacks repeats of the image side by side (across) and one atop the other (down the page) for as many repeats as necessary. The process is called tiling...the image is tiled...or the image is capable of being tiled. Any image may be specified, though most will not tile successfully

We'll first discuss the mechanics of creating a tilable image, then address border backgrounds such as the one on this page.

TILING IMAGES

For an image to repeat (tile) with no visible seams at adjoining edges, the edges must all be mirror images of one another. When the edges join, the seams are invisible because all of the mating pixels match one another.

The trick to creating a tilable image lies in creating a single image - regardless of its textures or colors - and then making and joining mirror copies. PaintShopPro is an excellent and affordable graphics program for the purpose.

For example, let's say you make or copy an image - we'll call it IMAGE, as shown at right. The four corners are numbered so you can keep track of them as we make and combine mirrors.

First, we'll make a copy of the image, then mirror and combine.

  • Open the IMAGE in the graphics program.
  • Edit_Copy the image.
  • Enlarge the image background so it's large enugh to accommodate another 4 copies horizontally and vertically.
  • PASTE the image (as a new selection) into the enlarged background. Don't align it yet - keep it away from the original for now.
  • Be sure the 2nd copy is selected, and choose Image_Mirror. This will flip the image horizontally.
  • Move that mirror image so that it aligns exactly with the right edge of the original, and so that top and bottom edges align perfectly.
Deselect, and you've created the image at above right. Note that the respective right and left edges of the 2 images match perfectly along the seam. This image is not yet tilable, because the top and bottom edges don't match (bet you can guess what's next!)

Second, we'll copy the new combined image and do the mirror routine again - with a twist - literally.

  • Using the selection tools, select the entire combined IMAGE+MIRROR - not one pixel smaller or larger - just the image, and all of it.
  • Select Edit_Copy
  • Select Edit_Paste and paste as a new selection into the free background area, again not yet touching the old image. Look carefully at the IMAGE+MIRROR illustraton, and you will see that this time time we don't want a mirror - what we really want is is to turn the copy upside down.
  • Select Image_Rotate and rotate 180o.
  • Move the rotated image so that it aligns perfectly with the IMAGE+MIRROR to create the FINAL IMAGE as shown.
You've made a tilable image!

Take a look at the page border at the left - you can see the four sections used to make that image. Now it's confession time. The IMAGE for that border is actually a section of a photograph acquired on the 'net. The picture included a background of tropical water rippling in the sunlight. We simply cropped a rectangular section of the water as the IMAGE, then applied the steps above to make it tilable. You can do the same with photos of water, sky, fabrics, pebbles, skin, animal fur...you name it, and recolor or play with distortions. The results can be astounding.

If you wish to experiment with color adjustments, distortions, and the like, you should start with a copy of the original IMAGE, then mirror, flip and combine after adjustments are complete. That discipline will ensure against any surprise edge-matching errors.

BORDER BACKGROUNDS

OK, so if the BACKGROUND attribute in the BODY tag repeats over the entire screen, why does our water image appear only at the left border?

It's very easy. If a tiled image is wide enough, it will not repeat to the right - that is, it will cover the entire screen width with no repeats to the right. Thus, it will only repeat itself over and over again down the screen.

An image that's 1100 pixels wide will more than fill the width of a 17" monitor at 1024x768 resolution. (It may not be quite wide enough to fill a 21"...so who cares...???.)

A Border Background is wide enough to cover the screen horizontally, but has an image only at the left side. The trick is simply to create a wide 1-color image, then paste in a copy of the border image at the left edge.

If you are not using an image, but want only to use a color fill or gradient at the left border, then you can make an image that's large enough to see as you make it - perhaps 1100x6. After the color is filled in, reduce size to 1100x1 before saving. The resulting narrow band will be quite small in filesize yet do a fine job in tiling downward.

Yet another approach is shown on this page.

Special offset table construction is required for pages with bordered bgs.


Back to Graphics Tutorial