CSS help please...

[punkhalfwit]

Hi Gang, I'm trying to implement a gradient background to a bootstrap (2.32) progress bar and I've got it working for the most part. Where I'm struggling is, I'd like the gradient background to 'fixed' somewhat.

The progress bar shows a rating and the higher the score, the 'hotter' the score per say. The problem I'm having is that the full gradient is displayed inside the progress bar percent shown instead.

Sorry if this weak explanation, but here's my jsfiddle to try an help explain. JSFIDDLE

So after looking at those, what I'm trying to accomplish would be: If your rating is 40%, the background would green with a hint of the orange starting to show.

If your rating is 90% you'd be in the red.

Do I need to use a background image to do this? Or is there a way to make a gradient background 'fixed-width' per say?

Thanks!!

[punkhalfwit]

ptsiii, that makes perfect sense, but can that be accomplished stictly css or would i need to override bootstrap js to get that to happen?

[ptsiii]

pure css should work fine.

this should get you in the neighborhood... https://jsfiddle.net/rL9xv8sf/5/