Ever wonder how some websites get that nice, subtle background going? I did. Turns out it’s really easy.

Just make an image (say 4 pixels high with a single dark pixel at top and three light ones below)


And repeat it as a background image over your page.

css

body {
    background-image: url(../images/background.gif);
}

html

<html>
<head>
    <title>Repeated background</title>
    <link href="css/repeatedBackground.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>

</body>
</html>

And voila.

It’s subtle, but nice for corporate style look and feel work or in any enterprise as a background to a table or TPS report.

Another approach is to apply the same idea with a gradient. Take a longer gradient image (say 1×500 pixels) and repeat it along the x-axis with a darker background color for where the gradient runs out :

css

body {
    background-color: #091A3A;
    background-image: url("../images/background-darkblue-1x500.gif");
    background-repeat: repeat-x;
}

and you get something like this:

Cool eh? These are just a web design tips I am picking up no my current project. Thanks to Jonas Claesson for point these out.