"Offering free computer help, hints, and tips to the Internet populace." Now with over 3,820 tips!

Web Development - Images and Backgrounds

Instant Bars, Columns, and More!

Everyone needs to know the small gif trick. Do you want to create solid-color bars and column dividers of varying amount of pixels on a page? If so, don't create separate graphics for each bar. Create a 1x1 pixel GIF image and color the pixel with your desired color. Now, when coding the graphic into your web page, use the image WIDTH and HEIGHT tags to set up how wide or tall you want the bar/column to be. This technique can definitely speed up your page loading time when done correctly.

Don't forget the text placement tip. Create a pixel with a transparent color, and use it to 'line up' text on a web page to the exact pixel. Need a 20 pixel left margin? Use the 1-pixel transparent GIF and the WIDTH=20 addition to the <IMAGE> tag.

Return to the Web Development - Images and Backgrounds page.

Print this tip


Get the Newsletter

Thanks For Sharing!



Newest Tips:

Microsoft Word 2010
Make Sure Others Can See Your Fonts Microsoft PowerPoint 2010
Animations or Video Displaying Poorly? Google Chrome
[MODIFIED] Report a Malfunctioning Web Page, Crash, or Other Issue Google Gmail
Show Unread Message Count as an Icon

Follow Us!

About MalekTips and the Author

The MalekTips website was created in 1998 by Andrew Malek of Envision Programming. The page's goal is to freely disperse computer-related tips, hints, and informative articles. Tips are organized to be easy to find, and are presented clearly, in easy-to-understand language. MalekTips also provides information and links to public-domain, open source, freeware, shareware, and commercial software available for download. < more >