Gradient background appearing in blocks ???

[j4mes_bond25]

I'm laying my hands on creating a gradient background, using the Firefox/Flash.

This website, which has got the gradient background for its menu

http://www.tristarwebdesign.co.uk/

I'm trying to achieve something similar, but regardless of saying "repeat-x", it although repeats but is doing so in "blocks" rather than appearing it the way it does on this website.

http://members.lycos.co.uk/darsh25/AllInclusiveWebDesign/contact.php (right at the top i.e. background for header).

Although, if I copy "tristar's" image, I get the PERFECT result, but I feel less comfortable with copying & rather make myself aware of how exactly could this be achievable.

Am I not designing my gradient background (which I'm doing using Macromedia Fireworks) the right way ???

Related CSS is:

#header
{
    background-image:url(headerbackground1.jpg);
    background-repeat:repeat-x;
    height:5%;
    font-family:Georgia, "Times New Roman", Times, serif;
    color:white;
    text-align:center;
    width:100%;
}

[tgreer]

It's about the image... his image has a gradient from the top to the bottom, so repeating it horizontally doesn't introduce any borders.

Your image's gradient runs horizontally, from left to right. Repeating that image horizontally creates a border between the light and dark edges.