SHARE
Facebook X Pinterest WhatsApp

So, You Want A Sideline Background, Huh?

Written By
thumbnail Joe Burns
Joe Burns
Jan 4, 2005

     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.

Recommended for you...

Guide to International SEO
How to Use the HTML a Tag
Project Management Tools for Web Developers
Enrique Corrales
Jun 20, 2022
Five Essential HTML5 Editors
HTML Goodies Logo

The original home of HTML tutorials. HTMLGoodies is a website dedicated to publishing tutorials that cover every aspect of being a web developer. We cover programming and web development tutorials on languages and technologies such as HTML, JavaScript, and CSS. In addition, our articles cover web frameworks like Angular and React.JS, as well as popular Content Management Systems (CMS) that include WordPress, Drupal, and Joomla. Website development platforms like Shopify, Squarespace, and Wix are also featured. Topics related to solid web design and Internet Marketing also find a home on HTMLGoodies, as we discuss UX/UI Design, Search Engine Optimization (SEO), and web dev best practices.

Property of TechnologyAdvice. © 2025 TechnologyAdvice. All Rights Reserved

Advertiser Disclosure: Some of the products that appear on this site are from companies from which TechnologyAdvice receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. TechnologyAdvice does not include all companies or all types of products available in the marketplace.