include "_i/1.h" ?>
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.]
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.
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).