I get an e-mail about this at least once every day, so I thought I'd put up a quick tutorial about it. See that green stripe down the left-hand side of the screen? I'm sure there's a specific name for it, but I call it a sideline stripe -- and it's very easy to make. Please note this tutorial only deals with how to make the background. For instructions on how to place it on your page, see
So, You Want A Background, Huh?
How You Do It
First off, you'll need a program that will create graphics for you. If you use an IBM-type computer, my suggestion is to grab something called PaintShop Pro. You get a 30-day trial and then are asked to send in a few bucks. You can grab it at
http://www.shareware.com. (I don't know an equal for the MAC. Help if you can!) Just enter "PaintShop Pro" when you get there. Or just use the program that's available to you on your computer.
You'll need to create an image that is long and thin. The thickness, or how tall the image is, is up to you. I keep it fairly small to cut down on bytes and load time. The width, though, is pretty much set. It has to be long enough to span the entire screen. Go with something at least 1200 pixels wide. You see, when an image is defined as 650 x 10 or whatever, it fails to address 800 x 600 and 1024 x 768 monitor resolutions. A width of 1200 covers all. The image I'm using on this page is 5 x 1200 pixels. That's pretty long and thin.
Using the graphics program again, make the left side a different color. I made mine lime green. It's an eye-catcher, don't you think? How much of the left side of the image you color will determine how thick your side-line stripe will be. When you use the thin stripe image as a background, the color lines up and you have a stripe.
Click Here to see
this page's background .gif.
Do I Have To Use Just Color?
No. If you'd like to place an image on the side rather than a color... do it. Just remember it's going to occur again and again. Some football sites use what appear to be yard markers, some sites make the side of the page look like a loose leaf notebook, and so on.
What About Text?
Yeah! What about text?! Oh, you're asking me. Okay, there are a couple of ways of dealing with this. The easiest is if you own and use
Microsoft Internet Explorer. Just add this command in your BODY command at the top of your page:
LEFTMARGIN="---"
The numbers are relative. One is bigger than two, two is bigger than three, etc. You'll have to play with the numbers to get the indent just right, so it doesn't cover your stripe.
But I Don't Have Explorer -- I Use Netscape!
So does almost everyone else on the Net, but Explorer is making a strong move! Here's how I indent. This is only to get text off of the stripe.
Stay tuned for how to place items on the stripe. Now, someone is going to go bonkers on me saying this isn't right and that there's a better way of doing it. All that aside, if all you want is the text off the stripe, this is how I do it, and it works. I add <OL> commands at the top. I don't add any <LI> commands, list items, or </OL>. You'll find that every <OL> pushes all the text in just a little bit. Just keep adding OLs until the text bumps over far enough for you. Let's remember, I taught myself HTML. Basically, I'm a hack. I use what works no matter how strange it seems. I think that's a good way of learning.
IE 7
Firefox 2.0
