Background
- Thread starter turbolapp
- Start date
It's a gradient. check: WordPress › Support How can I add a gradient background? CSS? I didn't read through it so I'm not sure if that link is entirely useful. But at least you can google 'gradient background' now. 
Image only needs to be 1px wide X however tall the fade is. Set the background color to whatever color is at the very bottom of the fade. Define the body in the CSS like this:
body {background:#YourBottomHexValue url('YourGradientImage.jpg') repeat-x top left;}
body {background:#YourBottomHexValue url('YourGradientImage.jpg') repeat-x top left;}
Erm, smoothest way to do the bg in that manner is to keep it at 1px width, that way the next column over is exactly like the column before it. Doing it at 10px or wider especially as a jpeg risks something as simple as artifacting causing a not-so-smooth effect going across.
For this particular situation its pointless going any larger than 1px wide for repeat-x or 1px high for repeat-y.
Course some might be thinking, what does it matter between 1px and 10px if they're only a couple kbyte difference, well if you're a high traffic site, multiply that by the amount of traffic.
http://www.fiksie.com/backgroundtest/
Page is made out of two containers. left part has 10px wide background and right part has 1px wide background. See for yourself which one looks better. Artifacts are more likely to show on narrower backgrounds.
Size for 10px x 1000px background is 9.4 kB
Size for 1px x 1000px background is 9.1 kB
Both backgrounds are saved at the same quality settings
If your site has 10.000 visitors monthly, that's 3 MB difference.
Page is made out of two containers. left part has 10px wide background and right part has 1px wide background. See for yourself which one looks better. Artifacts are more likely to show on narrower backgrounds.
Size for 10px x 1000px background is 9.4 kB
Size for 1px x 1000px background is 9.1 kB
Both backgrounds are saved at the same quality settings
If your site has 10.000 visitors monthly, that's 3 MB difference.
I don't know what you did there, but there should be no difference whatsoever between your 10px wide jpg and your 1px wide jpg. In fact, you could take your 10px jpg, crop it to 1px in width and save it and it would be exactly the same.
I also don't understand how you wound up with nearly a 10k image. If I open the same 10px wide file in Photoshop and save for web, it's 1.3k as a 100% quality jpg, 853 bytes as a 80% jpg.
Better yet, save it as a 24 bit png for the best quality and it'll only be about 550 bytes and completely lossless.
Until now. I would always save my images as "save as...", not "save for web...". That explains the huge difference in file size (holy shit, thanks for this one).
http://www.fiksie.com/backgroundtest1/
Check this one out. I saved it like you mentioned.
10px x 1000px background is perfect, there is no artifacts at all and weights only 1.82 kB
1px x 1000px background is almost perfect, but it still had some abrupt changes, but I guess it can be only seen by those who have 20/20 vision. It weights 1.15kB.
I still stand behind the "wider is better" theory.
Also, I would avoid png files for background gradient since ie and firefox render them slightly different.
http://www.fiksie.com/backgroundtest1/
Check this one out. I saved it like you mentioned.
10px x 1000px background is perfect, there is no artifacts at all and weights only 1.82 kB
1px x 1000px background is almost perfect, but it still had some abrupt changes, but I guess it can be only seen by those who have 20/20 vision
. It weights 1.15kB.I still stand behind the "wider is better" theory.
Also, I would avoid png files for background gradient since ie and firefox render them slightly different.
Until now. I would always save my images as "save as...", not "save for web...". That explains the huge difference in file size (holy shit, thanks for this one).
http://www.fiksie.com/backgroundtest1/
Check this one out. I saved it like you mentioned.
10px x 1000px background is perfect, there is no artifacts at all and weights only 1.82 kB
1px x 1000px background is almost perfect, but it still had some abrupt changes, but I guess it can be only seen by those who have 20/20 vision
I still stand behind the "wider is better" theory.
Also, I would avoid png files for background gradient since ie and firefox render them slightly different.
You just lost all credibility with the "save for web" thing, lol. I really don't understand why in a gradient, width would make any difference whatsoever beyond adding to the file size. When you repeat-x, the pixel(s) on the left = the pixel on the right in the same row. Whether that's 10 pixels or 1, it's going to be the exact same thing. If I'm wrong, someone please tell me why.
yeah, ok
Maybe I should mention that the problem does not lie in the way browser repeats the image, but the image itself, or to be precise, the way Photoshop saves the image.
I'm trying to make a point that 10px wide image, saved on the same quality settings as 1px wide image, is better looking. I provided a visual example, if you can't see it with your own eyes I give up.