Site Map

Your Current Location is in Yellow

Home

What That?

Web & Flow

The Nightmare

Background Tricks

To Style or Not

Browser Wars

I’ve Been Framed

Music!

Graphics

Great Pages

HTML FAQ

Arachnophilia

Background Tricks

I was very tempted to put some sort of mosaic of backgrounds at the top of the page, but alas, that would make the page take forever to load. So I will provide pages demonstrating some of the background tricks, along with the code I use.

First a word of caution: Make sure your text can be easily read against the chosen background. High contrast backgrounds are a poor choice unless you are putting only graphics (and perhaps music) on the page. If I can find some, I’ll give an example of what I mean on the Nightmare page.

Other considerations:

• Size of the background graphic file should generally be under 10K.
• How will you format your text to clear the border if you use a bordered background?
• If you use a bordered background, check your page in at least two browsers at 2 or 3 different resolution settings. (See the FAQ for code to line up text to clear the border)
• Don’t steal backgrounds or any other graphics.
• Stipulate a background color as well as graphic. The chosen color should be similar to the main color in the graphic, and your chosen text colors should read well on the background color. Set the background color as well as graphic so that those using browsers with no graphics will still see the basic color scheme when viewing your page.

The tricks I show on these pages do not use frames or JavaScript to achieve the effect. I will discuss the creative use of frames on the “I’ve Been Framed” page. Check http://www.wsabstract.com for some interesting JavaScript background things. One sets the background according to the time of day.

While all the effects I show here use official HTML code, MSIE 4.0 (or better) and NeoPlanet are currently the only browsers that fully support the specs, so some of the effects will render properly only in those browsers.

Follow the links below to see some unusual effects. The pages will open in a new window, so just close the example window to return here.

• Fixed background — works in MSIE and NeoPlanet browsers. Especially useful if you have a non-repeating watermark-type background image.
  Code: Place this style declaration in the head of the document:

  <STYLE type="text/css">
  <!-- BODY { background: #DDCCAA url(byzantin.gif) fixed } -->
  </STYLE>

  This states the color, graphic and attachment of the background (fixed)

• The wrap-around border (instructions on site)

• Variations: Right Border, Left-Right Border

• Left border partial background
  This one looks like a typical bordered background, but the graphic is repeated only down the left side, so the field color can be changed at will. Again with the style:

  <STYLE type="text/css">
  <!-- BODY { margin-left:100px; background: url(brassraildbl2.jpg) repeat-y #840020 } -->
  </STYLE>

  The margin-left property sets the margin, which makes the text clear the border (in all resolutions); the graphic is about 90x5 pixels (very small file) and repeats only down the y axis (vertical). The field color is set with the hex code.

• The Twinkling Star
  I’ve seen this effect done badly a couple of times. It should be subtle. I created an animated gif with several fixed stars and one faintly flickering star. Then I created a very small animated gif of one star. I sprinkled several copies of this small graphic around the page. The effect is random twinkling stars. If you make all the twinkles within the background graphic, the pattern repeat is usually very obvious and spoils the effect. Use this technique to create subtly dynamic backgrounds — resist the temptation to clobber your visitors with the animation.

• The Watermark effect (MSIE only)
  Instructions on the page.

• The Pseudo-border — this very page
  

  <TABLE width="100%" cellpadding=10 cellspacing=0 border=0>
      <TR>
          <TD id=map>
              Links in left column are here
          </TD>
          <TD id=main>
              Body of text is here
          </TD>
      </TR>
  </TABLE>
  
  

  To save a lot of typing and to make the style consistent on all the instructional pages, I use the following stylesheet, which defines the column width, background color, text color, font size, etc.

  BODY { margin:0; background-color:#000000 }
  BODY,DIV,P,BLOCKQUOTE,TD { font-size:14pt }
  TD { color:#A04040; vertical-align:top }
  H1 { font-size:200% }
  H2 { font-size:150% }
  H3 { font-size:125% }
  H4 { font-size:110% }
  H5 { font-size:100% }
  H6 { font-size:80% }
  TT { font-size:75% }
  TABLE { border:none; width:100% }
  H1,H2,H3 { text-align:center }
  BIG { font-size:125% }
  SMALL { font-size:75%; font-weight:600 }
  EM { font-weight:600 }
  A:link { color:#006080 }
  A:visited { color:#606000 }
  A.sm:link { color:#F0F0F0 }
  A.sm:visited { color:#A080A0 }
  .sm { text-decoration:none }
  .sm A:hover { color:#FF0000 }
  .ctr { text-align:center }
  .rt { text-align:right }
  .lft { text-align:left }
  .indent { margin-left:50 }
  #map { background-color:#705070; color:#F0F0F0; width:150; vertical-align:top }
  #main { background-color:#EECCBB; color:#A04040; vertical-align:top }
  #loc { color:#FFF440 }
  

  For more on stylesheets, “To Style or Not”. Be aware that the TD width (in pixels) does not work well in Netscape. If you want to get really fancy, you can use COLGROUP and COL tags to set “column” width, but I have not found that useful in this instance. Note: Tables actually consist of rows and cells, not columns — it’s a technical and conceptual thing — but the table is perceived to have columns.

Copyright © 1999 Carlton Higginbotham, Meade Street Productions.
No part of this site, including graphics and text, may be reproduced without written permission. Please post questions and comments on the Forum

Last updated