I've got a <div> that needs a gradient background. However, the size of the div is variable, which lands me back in "can't do gradients in CSS" land.
However, I'm pretty sure this is possible in jQuery, I just can't seem to find a decent example. Does anyone have something they can point my way?
Thanks.
I've got a <div> that needs a gradient background. However, the size of the div is variable, which lands me back in "can't do gradients in CSS" land.
However, I'm pretty sure this is possible in jQuery, I just can't seem to find a decent example. Does anyone have something they can point my way?
Thanks.
Share Improve this question edited Jan 26, 2009 at 21:37 Micah 116k87 gold badges237 silver badges331 bronze badges asked Jan 26, 2009 at 21:33 Electrons_AhoyElectrons_Ahoy 38.7k37 gold badges106 silver badges127 bronze badges6 Answers
Reset to default 5in case that someone needs this, and if you think that the jQuery plugin is too heavy, you can use this
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00A622', endColorstr='#00B726'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#00A622), to(#00B726)); /* for webkit browsers */
background: -moz-linear-gradient(top, #00A622, #00B726); /* for firefox 3.6+ */
While this will most likely give you precisely what you want, there seem to be quite a few potential collisions. Give it a shot, though; if it fails, I remend generating the gradient server-side.
Not Jquery but a suggestion: you could generate your gradient with SVG: http://www.w3schools./svg/svg_grad_linear.asp
The Background Canvas plugin lets you do that sort of thing and more.
Is it absolutely necessary to generate the gradient rather than simply create one in your favorite graphics program? Might be more efficient to save resources by simply tiling a graphic.
Why not calculate the gradiant to be larger than the div and hide the excess in overflow so on resize the rest is revealed?