|
|
Creating seamless backgroundsHTML 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 Okay... so what is a seamless image? 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 1Start Paint Shop Pro and open a new image 100 X 100 pixels. Step 2Fill this image with white (Red = 255, Green = 255, Blue=255). Step 3Click on Image and select Add from Noise in the Filter Browser. Step 4Select Random and set the % Noise at 18. ![]() Your image should look like ![]() Step 5Click 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).
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.
Page URL: http://www.webdevelopersnotes.com/tips/webdesign/ creating_seamless_backgrounds.php3
|
|