WebDevelopersNotes logo

home-icon Home / Graphics / How do I create seamless backgrounds?

How do I create seamless backgrounds?

How do I create 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.

Sponsored Links

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

One simple reason: FILE SIZE
A large background image, say 800×600, 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.

Add 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).

Sponsored Links

Your comments
Star icon IMPORTANT Have a question / problem? Click here to ask an expert.

Sponsored Links

Tips

How do I view a deleted web page?
Is there a way to view a deleted web page - one that is no longer available? Yes there is and the solution is quite simple. [more...]

Fact

PediaPress lets you select articles from Wikipedia and get them printed in a book form. [more...]

We use cookies to give you the best possible website experience. By using WebDevelopersNotes.com, you agree to our Privacy Policy