Background Textures










WARNING: These pages are written for Netscape 1.1. I don't know how many of these techniques will even work with other browsers.




How to do background pictures

If you already know how to do text and background colors and inline images, this technique is ultra-simple. Basically, you just stick "background=" in your <BODY> command, with the name of the approprate picture. An Example:

<HTML>
<HEAD>
<TITLE>Your Title Goes Here</TITLE>
</HEAD> 

<BODY background="bg1.gif">

Your text goes here.

</BODY>
</HTML>

You can do one large picture that takes up most or all of the page, or you can do a little one that the web browser will tile automatically.





Some Pointers

Be sure that all of your text colors contrast with your background. If your text is too close in color to parts of your background, people will have a very hard time reading your page. One common way to avoid this is to have your picture very light, and leave your text the standard colors- like the faded one on this page. This will not always work- a user can have their browser set to display light text on a dark background by default. Another way is to have a dark picture and very bright text.

When you are using small images, they look nicer if their edges tile smoothly. I heartily suggest buying a copy of Adobe Photoshop and Kai's Power Tools if you intend to use graphics often. KPT has a filter called "seamless welder" that will automatically turn a selection from a picture into a tile with smooth edges.

You might want to look at my page on Flashing Colors for another cool thing you can do with your backgrounds.




Evan's Home Page Evan's HotLinks Page HTML techniques




Backgrounds Page / Evan Dorn/ evan@sccs.swarthmore.edu
Last Updated January 22, 1996