CSS3 gradients AND background image

I have a function that when a 开发者_Python百科checkbox's status is changed, it's toggles the class of its parent to give a different background gradient. Click on the Lorem to see it in action

You can see it here.

The problem is that it won't work on the larger box in my example as there is a background image specified for my element, I know that a gradient cannot exist within the same space as the background image.

Is there a workaround for this to add a background gradient to the element? I can't add it to the image as this will be dynamically populated, and not all the images will be the same dimensions.

I don't mind changing any HTML/CSS at all. If it can be done with jQuery, that's great too :)

Gradients in CSS 3 is actually just a generated image. So if your browsers supports multiple backgrounds (use Modenizr, to test that), then you can add 2 background images. Like:

.multiplebgs.cssgradients .button {
    background-image: url("img.png"), -webkit-gradient(linear, left top, left bottom, from(rgba(247,148,34,0)), to(#dc7703));
    background-image: url("img.png"), -webkit-linear-gradient(-90deg, rgba(247,148,34,0), #dc7703);
    background-image: url("img.png"), -moz-linear-gradient(-90deg, rgba(247,148,34,0), #dc7703);
    background-image: url("img.png"), linear-gradient(-90deg, rgba(247,148,34,0), #dc7703);
}

You can add another div around the element with the background image and apply the gradient to that. As long as the image is transparent, the gradient will show through.

<div id="div-with-gradient">
    <div id="div-with-image">
        <!-- content -->
    </div>
</div>