There sometimes comes a time when we realize that a plain color background just isn’t enough. Then we find or make this insane looking background that we just have to put on our page. Problem is, it doesn’t tile, repeat, well throughout the page. So to fix this, we need to use another background image that does look good when it is tiled.

I’ll show you a quick and easy, maybe too easy, way to creating this effect.

First we need to choose two images.

I will be using the following gradient and pattern images:

The idea behind this is using two divs, one using the pattern and the other using the gradient on top of it.

The HTML:

<div id="backgroundpattern">
    <div id="backgroundgradient">
        Content
    </div>
</div>

The CSS:

body
{
margin:0px;
padding:0px;
}
#backgroundpattern
{
background:url(images/pattern.jpg) top left repeat;
}
#backgroundgradient
{
background:url(images/gradient.jpg) top left repeat-x;
height:600px;
display:block;
}

Explanation:

Everything seems simple enough right?

The only thing to remember is that we don’t want our gradient to cover the entire page, thus you must set the background property of “backgroundgradient” to “repeat-x.” This repeats the background horizontally only.

The background property for “backgroundpattern” can be set to the usual “repeat.”

Here’s the beautiful result.

Now, if you want to use a solid color instead of a pattern you can just use one div and have the following for it’s background property:

background:#006600 url(images/gradient.jpg) top left repeat-x;