How do I add a gradient to a websites background image ? Ok... i guess I can do it using a background image but wouldn't that image be huge ? I what a efficient method, one that can be applied to long page. For example on this website : http://sclegacy.com/ they use a black-blue background gradient. How can I do that without using a lot of bandwidth ?
Make a small image and repeat it. For example I have this image repeated by the x axis to create the effect on my site.
Hey, What you do is make a very small image i.e. if it is a gradient horizontal then make it whatever height you need and then just make the width 1px and have it repeat as the background. If it is vertical then the opposite. If you need more of a explanation you can PM me. Good luck.
Only one thing you might want to watch out for-- if the gradient is in some small box, 1px is great. However, going across the whole width of a large screen like mine means the browser has to repeat that 1px a gazillion times. In this case, I'd make that png or gif something like 10px wide just to ease browser rendering. Not that you'll ever ever see a time difference : )