How to override HTML image using CSS

Question

I have my current code:

#content img[src="/img/test.gif"] { 
    background-image:url(dark-img.png) !important;
}

From my understanding !important; overrides existing values?

Why isn't this overriding the current HTML image in place there? The background shows up, behind the HTML image.

I want it in front of the HTML image, is this possible using CSS or JS?

Edit: For what its worth, im making a userscript that will modify the existing style of the site. So I do not have direct access to the HTML image.

Answer 1

You don't need javascript for image replacement! As long as you can identify the image by a CSS selector, you can use CSS to do the trick.

See the solution here http://www.audenaerde.org/csstricks.html#imagereplacecss