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!
Start Paint Shop Pro and open a new image 100 X 100 pixels.
Fill this image with white (Red = 255, Green = 255, Blue=255).
Click on Image and select Add from Noise in the Filter Browser.
Select Random and set the % Noise at 18.
Your image should look like
Click on Image - Other - Emboss. The image now becomes greyish in color. Your result should be
Use this in a page to see how it looks or click here. (This open another window).
Comments, questions, feedback... whatever!
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.
Recent Blog Posts
- Hotmail Sign In page
- Create a Hotmail account - Instructions
- Create Gmail address
- Download and install Outlook Express
- Get your free Gmail address
- Outlook Express new version
- Create my own email address
- Browers for Windows list
- Get email address
- Color combinations for web sites and pages
- Create Yahoo ID