Building a background

You can get backgrounds on the net (there are many sites offering free backgrounds) or you can build them by yourself. You can write a web page changing its background color by means of a simple HTML statement (look at my HTML course to know more about that) or you can build an image (in this case you have to write something like this: <body background=your_GIForJPEG>). If you put an image as a background, any web browser will use it to tile the whole page. In this case you have to build a 50x50 pixels image, 72 pixels of resolution, choosing 16 millions of colors as image type:

You will get something like this:

Now you can modify your image as you prefer. For example, you could use the airbrush tool (I choose the blue color as a foreground color, the gray color as a background color and 'marble' as a paper texture):

This is your simple background! If you are using PhotoShop, you can use the 'Texture' option ('Filters' menu). Anyway you can try several effects and filters to change your image, in fact this is just a sample...Suggestion: build simple images...for example, try this one:

Finally, put your background in your page (you can use a GIF or a JPG image):

Where <bgcolor="#xxxxxx" is a background color similar to your GIF/JPG background color. Don't forget this little thing, because there are people disabling images...and it happens there are web pages here and there where their webmasters forget that. So if you disable automatic loading of images, and visit some of those pages, you will see nothing! It isn't a great idea putting white text over a black image as a background image, without specify bgcolor="#000000"! If you do that, all people disabling images will see white text on WHITE BACKGROUND (usually the default background color)!

Well, there are several techniques to create cool backgrounds, but the real problem is another: tiling yields seams...I means that if you use a 50x50 pixels image as a background image, the web browser will use it to tile the page, but you could see seams between images (all tiles). For example:

Can't you see seams? Of course, you can't. But...look here then!

On the contrary, this is the same 'piece of background' without seams:

The corresponding page is better than previous.

In order to create seamless background you can use several techniques. I'm going to show you my favorite technique. First of all you have to divide your image into 4 equal areas, move them (according to a specific scheme), adjust their edges and finally reassemble them into their original positions:


(Original GIF)	('Arranged' GIF)

Now you have to retouch the central edges of the 'arranged' GIF (marked as red). You can use the Retouch tool for example, or you can copy and paste (select an area inside of one of the 4 squares and paste it OVER the edges). Finally, reassemble the original GIF:


(Retouch this one...)	(Then reassemble pieces after retouching...)

If you are using PhotoShop:

Create a new image (50x50 pixels)
Filter -> Other -> Offset (Horizontal=25, Vertical=25, Wrap Around then click on OK
Select the Rubber Stamp Tool, select an area of your image as a source point to clone from
Blend the horizontal and vertical centers to smooth away the hard edges (choose a 'regular' piece of the image and select it by pressing the ALT-Click keys, then click over the edges...)
To reassemble everything: Filter -> Other -> Offset (or simply Ctrl-F)...done!

If you are using PaintShop:

Duplicate the image (create a new blank image of the same size of the original GIF)
Cut the upper left square of the original GIF (number 1) and paste it on the blank image, building the lower right square (number 4)
Cut the upper right square of the original GIF (number 2) and paste it on the blank image, building the lower left square (number 3)
Cut the lower left square of the original GIF (number 3) and paste it on the blank image, building the upper right square (number 2)
Cut the lower right square of the original GIF (number 4) and paste it on the blank image, building the upper left square (number 1)
Adjust the central edges using the retouch tool (you can also zoom the image and use the brush tool)
Reassemble the retouched squares into their original positions

Oh, I was forgetting one more thing: I think choosing a background image is not a great idea, because web pages get too much heavy for eyes and, of course, too much heavy to download! Anyway, if you really want to use them, choose soft images...