Reputation: 38653
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.
Upvotes: 3
Views: 5242
Reputation: 157
Why not calculate the gradiant to be larger than the div and hide the excess in overflow so on resize the rest is revealed?
Upvotes: 0
Reputation: 177
in 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+ */
Upvotes: 5
Reputation: 9058
The Background Canvas plugin lets you do that sort of thing and more.
Upvotes: 1
Reputation: 35306
Not Jquery but a suggestion: you could generate your gradient with SVG: http://www.w3schools.com/svg/svg_grad_linear.asp
Upvotes: 2
Reputation: 3634
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.
Upvotes: 0
Reputation: 44823
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 recommend generating the gradient server-side.
Upvotes: 2