[jquery] Is it possible to override / remove background: none!important with jQuery?

I have an element which should have a background image, but it's been given the following style in a stylesheet that I'm not able to access/modify:

#an-element li {
  background: none !important;
}

Is it possible to undo that style with jQuery? I've tried to add background: inhert!important with jQuery in two ways: by adding an inline style, and by removing an applied style. Neither work.

Here is a Fiddle illustrating the problem: http://jsfiddle.net/9bJzk/1/

UPDATE: I had the wrong fiddle link, please look again.

UPDATE 2: I cannot edit the stylesheet. I've changed the title to be more clear now. I have to do this with jQuery as I can't control the loading order of the CSS files, but can run jQuery onload.

UPDATE 3: I can't explicitly set the 'kitten' pic (see the fiddle) with a more accurate CSS selector like selector like #an-element .image-list li as some are suggesting as those images are being written out on the fly. The jsFiddle was just an example. To make it clearer still: Can the effects of the background: none be undone with PURE jQuery and NOT editing of any stylesheets. Thanks for sticking with this!

Any !important can be overridden by another !important, the normal CSS precedence rules still apply.

Example:

#an-element{
    background: #F00 !important;
}
#an-element{
    background: #0F0 !important; //Makes #an-element green
}

Then you could add a style attribute (using JavaScript/jQuery) to override the CSS

$(function () {  
    $("#an-element").attr('style', 'background: #00F !important;');
    //Makes #an-element blue
});

See the result here

Yes it is possible depending on what css you have, you simply just declare the same thing with a different background like this

ul li {
    background: none !important;
}

ul li{
    background: blue !important;
}

But you have to make sure the declaration comes after the first one seeing as it is cascading.

Demo

You can also create a style tag in jQuery like this

$('head').append('<style> #an-element li { background: inherit !important;} </style>');

Demo

You cannot see any changes because it's not inheriting any background but it is overwriting the background: none;

With a <script> right after the <style> that applies the !important things, you should be able to do something like this:

var lastStylesheet = document.styleSheets[document.styleSheets.length - 1];
lastStylesheet.disabled = true;

document.write('<style type="text/css">');
// Call fixBackground for each element that needs fixing
document.write('</style>');

lastStylesheet.disabled = false;

function fixBackground(el) {
    document.write('html #' + el.id + ' { background-image: ' +
        document.defaultView.getComputedStyle(el).backgroundImage +
        ' !important; }');
}

This probably depends on what kind of browser compatibility you need, though.

div { background: none !important }
div { background: red; }

Is transparent.

div { background: none !important }
div { background: red !important; }

Is red.

An !important can override another !important.

If you can't edit the CSS file you can still add another one, or a style tag in the head tag.

Why does not it work? Because the background CSS with background:none!important has one #ID

A CSS selector file that contains an #id will always have a higher value than one .class

If you want to work, you need add #id on your .image-list li like this:

#an-element .image-list li {
    display: inline-block;
    background-image: url("http://placekitten.com/150/50")!important;
    padding: 1em;
    border: 1px solid blue;
}

result here