PDA

View Full Version : Repeating header/nav bar


Agent007
01-11-2007, 10:15 PM
If my header and nav bar are a solid color, how can I slice a small bit off each side and make it repeat to extend infinitely left and right?

A great example is the header/nav of "www.pixelotto.com".

chriskq
01-12-2007, 06:46 AM
this is very easy to do Agent007, and also great for making pages load quicker as all u need is a image that is 1px wide and with the required height

in your style sheet on the body class use:

background: #000 url(images/hdr.gif) repeat-x 0 0;
height: __px;


u first specify the default color thats similar to what color ur gradient finishes at, eg: on the url u gave its that purple color which is #9d06a4;.

the url points to the 1px wide slither u cut out of ur gradient.

repeat-x means repeat horizontally indefinat

and 0 0 means the image will start in the top left corner of the page.

you'll need to give the height of watever height ur slither is.

if this doest make sense let me kno