I created a header image that has a width 0f 960 and a height of 225, then cut the gradient to a width of 1 and height of 225, and said in my code to repeat that image across the x axis to fill in the space left by the header, but the gradient keeps producing weird lines across. What do I do to get rid of this lines?

3 answers

This was chosen as the best answer

I have also only had that problem while using GIF format. PNG is what I use if I use gradients.

Answered about 6 years ago by Matt Ewing
  • Ok thanks that fixed it. Ralph Stone about 6 years ago

Speaking from experience, I'd say you're either using a gif or low-quality jpg. Switch to a higher quality jpg or png.

Answered about 6 years ago by Brad Ramsey
Ktash 1851

A more detailed reason behind the why here:

GIFs are based on a color palette so the filesize can be smaller. They are given a limit on the colors that are used in the image, and then from there compile the image based on those colors and their location in the image by pixels. What is happening here is your gradient has more colors than your GIF image is allowed (a max of 256), so your gradient gets over-compressed and compensates by assigning the closest value, causing blocks of colors, or the 'lines' you are seeing. For smoother colors, PNG or JPEG are the recommended formats, though all of the formats have their own advantages and disadvantages.

I'd strong recommend doing more reading on the formats so you understand when it is best to use what format. the comparison of each.

Answered about 6 years ago by Ktash