Create a new document 300x100

Set the background to #EEEEEE

Using the rectangular marquee tool make a large selection taking up most of the canvas like this:

Create a new layer and fill the selection with any colour.

Right Click the layer and select Blending Options and use these options:

Blend Mode color: #000000

For the gradient use these settings:

Gradient colors: #EEEEEE to #DDDDDD

Using the selection tool again create a small rectangle and delete this from Layer 1

With the selection still active create a new layer and fill with any color.

Apply these Blending Options to the new layer:

Gradient Colors: #0080C0 to #006699

Now select the Slice tool and slice it up like this:

Go to Save For Web and use whatever image settings you wish to use.

You will get 3 images, you can delete the 2 sides, but keep the narrow one.

This can now be placed as a repeated image on the x axis. To do this use this CSS:

<style type="text/css">
<!--
body {
background-image: url(navbarback_02.gif);
background-repeat: repeat-x;
background-color: #EEEEEE;
}
-->
</style>

This will place the image as the background and repeat it across the page.

This is an example of the layout.

See Preview Here