How to override HTML image using CSS

Question

Hi,

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 isnt this overriding the current HTML image in place there? The background shows up, behind the HTML image.

I want it infront 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 dont have direct access to the HTML image.

Thanks

Answer 1

you'll have to place the first image as a background-image too. Then you can override it. You could do in a "standard" css file for the site, and every user gets its own, where he can override what he wants.

Answer 2

The background-image property, when applied to an image, refers to (drum roll ... ) the background-image of the image. It will always be behind the image.

If you want the image to appear in front of the image, you are going to have to use two images, or another container with a background-image that covers the first image.

BTW, it is bad practice to rely on !important for overriding. It can also be ineffective since 1) it can't override declarations in an element's style attribute, and 2) it only works if it can work based on the markup and the current CSS. In your case, all the huffing and puffing and !important declarations won't make an image do something it can't do.

Answer 3

Use your 'userscript' to change 'src' attribute value.

If there is an ID there, you can do this:

document.getElementById('TheImgId').src = 'yournewimagesrc';

If there is no ID:

var imgElements = document.getElementsByTagName('img');

Do iteration of imgElements. When its src value is match with your criteria, change the value with your own, do break.

Update:

Javascript:

<script language="javascript">
    function ChangeImageSrc(oldSrc, newSrc) {
        var imgElements = document.getElementsByTagName('img');
        for (i = 0; i < imgElements.length; i++){
            if (imgElements[i].src == oldSrc){
                imgElements[i].src = newSrc;
                break;
            }
        }
    }
</script>

HTML:

<img src="http://i.imgur.com/eu757.png" />
<img src="http://i.imgur.com/IPB9t.png" />
<img src="http://i.imgur.com/IPB9t.png" />
<script language="javascript">
    setTimeout("ChangeImageSrc('http://i.imgur.com/eu757.png', 'http://i.imgur.com/IPB9t.png')", 5000);
</script>

Preview:

The first image will be replaced after 5 secs. Try Live Demo.

Answer 4

i agree with all the answers here, just thought id point out that 'browsers' such as IE won't like the img[src="/img/test.gif"] as a means of selecting the image. it would need a class or id.

Answer 5

The images shown in tags are in the foreground of the element, not the background, so setting a background image in an won't override the image; it'll just appear behind the main image, as you're seeing.

What you want to do is replace the image. Here's your options:

• Start with an element with a background image, not an tag. Then changing the background image in CSS will replace it.

• Start with an tag, but use Javascript to change the src attribute. (this can't be done in CSS, but is simple enough in JS)

EDIT:

Seeing your edit in the question, I'd suggest option 2 - use Javascript to change the src attribute. It's quite simple; something like this would do the trick:

document.getElementById('myimgelement').src='/newgraphic.jpg';