Learn how to create seamless images that tile in the background of a web page giving a sense of a large image.

HomepageArrowWeb development tips and tricksArrowWeb design tips and tricks

Sponsored Links

Creating seamless backgrounds

HTML allows you to embellish web pages in many ways. One of these is, putting a background image using BACKGROUND attribute of the <BODY> tag.

Employing any odd image as a background seldom results in the desired effect and usually spoils the look of the page. The reason is that browsers tile the background image. You can either make a very large background image, something like 1000 X 800 pixels or use a smaller seamless image.

Why use a seamless image instead of a large background image?

One simple reason: FILE SIZE
A large background image, say 800x600, would be at least 30kb (optimized). A small seamless image would be much smaller. You can have seamless images that are a mere 3kb! Thus, small seamless images result in faster web page display.

Okay... so what is a seamless image?
It's an image which, when tiled, does not display its borders/boundaries. This happens because the left and right & top and bottom sides are welded so a particular side continues the information on the opposite one.

This tip will help you make a simple but useful seamless image that can be used as a background for your pages. In the next tip you can beautify and color your image.

I employ Paint Shop Pro here, however, you may try your hands at Adobe PhotoShop... the tools may vary but the logic remains the same!


Step 1

Start Paint Shop Pro and open a new image 100 X 100 pixels.

Step 2

Fill this image with white (Red = 255, Green = 255, Blue=255).

Step 3

Click on Image and select Add from Noise in the Filter Browser.

Step 4

Select Random and set the % Noise at 18.

Adding Noise to the image
Your image should look like
Step 4 of creating a seamless background in PSP

Step 5

Click on Image - Other - Emboss. The image now becomes greyish in color. Your result should be

Final image

Use this in a page to see how it looks or click here. (This open another window).



Page contents: Create a small seamless background image that tiles on a web page giving a semblance of a larger image with minimal download times.

AddThis Social Bookmark Button

Recent Articles

Popular Articles

Related Articles

More web tips & tricks