Fixed Backgrounds

With just HTML, the only option for the background image was to have it remain static so it didn't scroll with the page. With CSS, there are several more options available.

The background image can still remain static or scroll with the page, but it can also be repeated only across the top of page, down either side, or it can be positioned anywhere on the page and coded so that it doesn't repeat. Technically, you can have it tile across the bottom, too, but it's not very practical to do so.

Those tutorials are available in members site, this tutorial shows you how to have the background remain fixed in place when the page is scrolled. To lock the background in place so that it doesn't scroll, use this:

background-attachment: fixed;

One additional note about backgrounds . . . I've received many emails from folks trying to create a design where the default page margins interfere with what they're trying to accomplish. You see, by default a browser takes about 22 pixels of space around the edges of the viewing window as the page margins. A background image will tile behind these margins but trying to place content up against the edge of the screen is impossible unless you remove the page margins. They can be removed, or changed, in the body element. To remove the margins, add this to your external style sheet:

body {margin: 0px;}