Gradient Question

[chanveil]

I have a gradient being used on a sidebar on a website, but I need to to somehow stretch the length of the page. Is it possible to create a larger image of the gradient and resize it to fit the size of the rest of the content?

[rubykitten]

The best why I've found to do what your looking for is to create a small 1px image of the gradient and then use it as a background image for a div. Style the div to use background-repeat:repeat-x or background-repeat:repeat-y depending on which way your gradient flows and then width 100%. It will then create the gradient across the length of the page.You can just make a larger background image if you wish, however its important to keep image file size in mind as it can effect your pages load time.

[ShadowMage]

Depending on which browsers you need to support, you could use CSS3 gradients. These won't work in older browsers or in IE8 and below. If the gradient is not absolutely necessary, you could fall back to a plain color for browsers that don't support CSS gradients. This way you could eliminate images all together.If maximum browser support is necessary, though, I'd recommend CoderKitten's solution, using a 1px wide gradient that is the same height as your element, and set it as a repeating background. (This is for horizontal gradients, if you need a vertical gradient make the image 1px tall and as wide as you need it)