How to override HTML image using CSS

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 us开发者_JAVA技巧ing 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.

---

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

---

Here is the code using only css:

<img src="tiger.jpg" 
     style="padding: 150px 200px 0px 0px; 
            background: url('butterfly.jpg'); 
            background-size:auto; 
            width:0px; 
            height: 0px;">

• sets the image size to 0x0,
• adds a border of the desired size (150x200), and
• uses your image as a background-image to fill.

If you upvote this answer, give @RobAu's answer an upvote, too.

---

The replacement of an image in CSS can be done in several ways. Each of them has some drawbacks (like semantics, seo, browsercompatibility,...)

On this link 9 (nine!) different techniques are discussed in a very good way :

http://css-tricks.com/css-image-replacement/

If you are interested in css in general : the whole site is worth a look.

---

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.

---

I answered a similar question in another SO page..

https://robau.wordpress.com/2012/04/20/override-image-src-in-css/

<img src="linkToImage.jpg" class="egg">

.egg {
  width: 100%;
  height: 0;
  padding: 0 0 200px 0;
  background-image: url(linkToImage.jpg);
  background-size: cover;
}

So effectively hiding the image and padding down the background. Oh what a hack but if you want an with alt text and a background that can scale without using Javascript?

---

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.stack.imgur.com/eu757.png" />
<img src="http://i.stack.imgur.com/IPB9t.png" />
<img src="http://i.stack.imgur.com/IPB9t.png" />
<script language="javascript">
    setTimeout("ChangeImageSrc('http://i.stack.imgur.com/eu757.png', 'http://i.stack.imgur.com/IPB9t.png')", 5000);
</script>

Preview:

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

---

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.

---

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.

---

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';

---

You should be able to replace it by just doing something like:

.image {
    content: url('https://picsum.photos/seed/picsum/400');
    width: 200px;
    height: 200px;
}

Unfortunately seems that it does not work in Firefox :(