Jump to content

Gradient Question

Recommended Posts

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.

Link to post
Share on other sites

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)

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...