CSS Divider using a background image

Follow these instructions to add a simple divider strip just like the ones I use on these pages onto your own web page.

The first thing you need to do is create your graphic, here is the one I will be using:-

The size of the image is only 2x20 pixels, this helps to reduce load times as we are going to repeat it across the page. You can use any size you want.

You can use this method just to display a narrow strip across the page but you will be able to add any text which will show above the repeated image.

This is the CSS Class that you will need

An explanation about a few of the entries in the class above:-

Width:-
This is set to 'Auto' so that it will stretch across a page page, or when placed within another division.

Font settings:-
These should be understandable, I have set this one to white..

Border settings:-
You can use these settings to add a bit of extra decoration, I have set it to use an black line below the divider.

background-repeat settings:-
This just tells your browser to repeat the image across your selected area.

Examples of the divider

This is how the divider will look when placed inside another div tag when using this code.

<div class="gradefill"> </div>

Here is another example but this time we have added some text.

<div class="gradefill">Gradiant background with text overlay</div>

Home