Creating a (linear) gradient page packground

This is actually a simple concept. That few people understand.
You can only use linear gradients with this. (Radial or complex gradients would take up too much space.)

Latest revision: 2080814157
Previous revisions: 1080812806

You will need:

Item This tutorial uses
HTML/CSS editor Dreamweaver CS3
Image editor other than Paint :p Photoshop CS3
Web browser(s) Firefox, Internet Explorer, Flock, Safari, Opera, Amaya

STEP 1 - MAKE A GRADIENT

This is fairly simple, even if you don't have a gradient tool.
Personally, I hate Photoshop's gradient tool (when I'm trying to do this :))
Actually, you really can't use a gradient tool, as that makes a wide image.
So, here's an alternative.

Design a gradient using the 'Pixel' technique.
That's one pixel per color.

STEP 2 - RESIZE THE GRADIENT

In Photoshop, use the 'Image Size' dialog (Under the Image menu, Ctrl-Alt-I)

  1. Uncheck the 'Constrain Proportions' checkbox
  2. Check the 'Resample Image' checkbox
  3. Set 'Resolution' to 72 ppi (pixels/inch)
  4. If your gradient has a left color and a right color, set 'Width' to 10000.
    If your gradient has a top color and a bottom color, set 'Height' to 10000.
  5. Choose 'Bicubic' from the menu.

STEP 3 - SAVE THE IMAGE

Save your image in the same directory as your webpage.
I prefer to save it as a GIF with the 'Exact' palette and 'Force' to 'None'.

STEP 4 - MAKE THE WEBPAGE

Make a blank webpage.

  1. Insert the following in the <head> section:
       <style type="text/css">
       <!--
       #apDiv1 {
          position: fixed;
          left: 0px;
          top: 0px;
          width: 100%;
          height: 100%;
          z-index: 1;
       }
       #apDiv2 {
          position: absolute;
          left: 0px;
          top: 0px;
          width: 100%;
          height: 100%;
          z-index: 2;
       }
       -->
       </style>
  2. Insert the following in the <body> section:
       <div id="apDiv1"><img src="BACKGROUND.GIF" width="100%" height="100%"></div>
       <div id="apDiv2">CONTENT</div>
    where BACKGROUND.GIF is your image file, and CONTENT is your page's content.

STEP 5 - NOTE

that the background will scroll with the page. This makes no effect if your gradient has a left color and a right color.

If your gradient has a top color and a bottom color, and you do not want this to happen, you can change this.
To do so, change position: fixed; to position: absolute; in the <head>, and add...
   body,td,th {
      background-color: #RRGGBB;
   }
above #apDiv1 {.
RRGGBB should be the bottom color of your gradient.

STEP 6 - TEST

This works well with Internet Explorer, Firefox, Flock, and Safari.
But not with Amaya or Opera.

BONUS STEP 7 - AUTOMATE

I am working on a way to automate this process using PHP, ImageMagick, IMagick, JavaScript, CSS, HTML, scripts from Dynamic Drive, and GIFs. It shouldn't take long.