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?
I have also only had that problem while using GIF format. PNG is what I use if I use gradients.
Speaking from experience, I'd say you're either using a gif or low-quality jpg. Switch to a higher quality jpg or png.
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.