Gradient background appearing in blocks ???

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/A...gn/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:

Code: Select all

#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%; 
}

It appears to me that the difference between your site and Tristar's is the size, and type, of the graphic.
Tristar looks to have used a graphic that spans the entire area of that image, I can't see the code, but yours appears to spane 1/8th of your chosen area.
You can do this but:-
Your gradient is not exactly vertical so you can see the join where it repeats, which makes it appear 'blocky'.
It looks like it's image related, rather than code related.
Does this sound correct?
If not, please provide more details.

You're right. I reckon, after looking at the image carefully, I realised that his gradient was top & bottom while mine wasn't left & right. The problem is solved. Thanks for your time & help, in the mean time.