1px gradient image repeat-x has allways streaks


how do you make gradient images that you repeat as background without
having streaks?

I have a image 1px w x 900px h with a gradient from black to dark grey.
No matter how i save the image (gif, png, jpg) i always have streaks in the image (repeat-x).

I don’t have this problem with lets say dark yellow do light yellow.

1px width is too narrow anyhow. That actually creates a lot of work for the browser. Make it, say, 20px wide, and the problem will go away. The file size will still be very small.

Not really small. 1Px is 576 byte and 15px is 8,26 kbyte (png-8).

I thought its a common way to make them 1px. If you look around most repeated backgrounds are 1px. But i learned something new - that the more the browser needs to reaped the more work he has.

Yes, it’s commonly mentioned around the traps that repeating images shouldn’t be too narrow, and that the browser works harder repeating a rally thin image. Usually 10px or so is recommended, but I usually make it a bit wider still. I also tend to get the lines if I go much smaller.