Repeating (tiling) background images

Web browsers will readily take a small image () and repeat (tile) it to fill the background of a whole page, or just one CSS element ('box') on the page.

<p style='
background-image: url("background/Checker.gif");
color: #fff; '>some text</p>

some text

This is a really low-bandwidth way to affect a large portion of the screen: The small file is sent by the webserver just once--.

You can control whether the image repeats only horizontally (repeat-x) or vertically (repeat-y), both, or not at all, and what part of the 'box' it's aligned to (default is top left).

<div style="
background-image: url('someimage.jpg');
background-repeat: repeat-x;
background-position: center bottom;">

[Note the two different kinds of quotes. Anytime you have quotes inside of others, they should be different.]

Striped background

Many GC pages use this very small striped image set to repeat to fill the whole page background to give a bit of 'texture' to the area outside of the content container.

Color gradients -- background images & color together

Here are two sites that use a color gradient as part of the background of some element.

The SNU effect could be done with a really tall graphics that repeats horizontally. But if you have written content that goes below what you originally thought was "really tall", you'll see a bottom edge.

Instead on the SNU page, they repeat one graphic () horizontally across the top of the page which grades into the page background color ().

The color gradient can be oriented horizontally or vertically.

This effect probably works best when it's fairly subtle, and doesn't draw a lot of attention to itself. Notice that both of these sites are grading from one color to an unsaturated color (not between two different colors).