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.

The image of an img element is not a "existing background-image value". Background images and "normal" (foreground, content) images are two separate things and you can't use one to override the other. — RoToRa
– RoToRa, Commented Sep 23, 2010 at 15:29

Rob Audenaerde · Accepted Answer · 2012-05-01 10:51:55Z

13

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

answered May 1, 2012 at 10:51

Rob Audenaerde

20.4k12 gold badges83 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Egli Becerra Over a year ago

Genius... some people are tweaking things in places where they dont have access to js nor html (for example VOC templates in Dynamics) this is an amazing way of doing this with pure css...

ScienceDiscoverer Over a year ago

@EgliBecerra This also can help to change particular tab favicons in Firefox using userChrome.css! This solution is really unthinkable!

Community · Accepted Answer · 2017-05-23 12:26:23Z

11

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.

edited May 23, 2017 at 12:26

CommunityBot

11 silver badge

answered Aug 25, 2015 at 15:07

serv-inc

38.8k9 gold badges195 silver badges215 bronze badges

2 Comments

rainabba Over a year ago

This approach does require a known/fixed size image though right?

serv-inc Over a year ago

@rainabba: You fix the size of the space. If the background image is larger, it is cropped. If it is smaller, it is tiled.

Peter · Accepted Answer · 2012-08-17 14:58:18Z

2

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.

answered Aug 17, 2012 at 14:58

Peter

49.2k47 gold badges138 silver badges184 bronze badges

Comments

Robusto · Accepted Answer · 2012-12-12 12:29:35Z

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.

edited Dec 12, 2012 at 12:29

answered Sep 23, 2010 at 15:30

Robusto

32k8 gold badges59 silver badges79 bronze badges

2 Comments

Dean Over a year ago

Yeah sorry - not thinking clearly. I understand its the background image. Is there a way I can override it using Javascript? (thinking GM).

Robusto Over a year ago

You can definitely override it using Javascript. Just get a reference to the image (let's say "myImage") and do myImage.src = "dark-img.png" or whatever urlyou want.

Pocketninja · Accepted Answer · 2015-08-24 19:00:36Z

2

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?

answered Aug 24, 2015 at 19:00

Pocketninja

4253 silver badges12 bronze badges

Comments

Jeaf Gilbert · Accepted Answer · 2010-09-23 16:31:59Z

1

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

Preview:

alt text

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

edited Sep 23, 2010 at 16:31

answered Sep 23, 2010 at 15:42

Jeaf Gilbert

12k19 gold badges83 silver badges108 bronze badges

4 Comments

Dean Over a year ago

You've lost me completely, I've hardly ever touched JS let alone GM.

Jeaf Gilbert Over a year ago

src of img is not style, cannot be overrided with CSS. Everybody suggests you to use Javascript.

Dean Over a year ago

I understand that bit. The image contains no ID, its just pure HTML, with src="image2.jpg". I tried the 'If there is no ID' thing and it doesnt seem to work from what im trying. Do I need to learn JS before I go any further into this mod? (requires 2 images to be done via JS, by the looks of things).

Rob Audenaerde Over a year ago

You don't need javascript. See my answer

Tokk · Accepted Answer · 2010-09-23 15:29:11Z

0

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.

answered Sep 23, 2010 at 15:29

Tokk

4,5223 gold badges35 silver badges48 bronze badges

1 Comment

Dean Over a year ago

I cant change the first image, as its run by the site owner - not me. Its to modify the site using Stylish.

Alex B · Accepted Answer · 2010-09-23 15:49:34Z

0

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.

answered Sep 23, 2010 at 15:49

Alex B

1,0193 gold badges18 silver badges27 bronze badges

1 Comment

Spudley Over a year ago

Older versions of IE won't like it. It should be fine in IE8, though.

Spudley · Accepted Answer · 2010-09-23 15:54:08Z

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

Rui Marques · Accepted Answer · 2021-05-02 20:33:21Z

0

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 :(

answered May 2, 2021 at 20:33

Rui Marques

8,9444 gold badges63 silver badges94 bronze badges

Collectives™ on Stack Overflow

How to override HTML image using CSS

10 Answers 10

2 Comments

2 Comments

Comments

2 Comments

Comments

4 Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

2 Comments

2 Comments

Comments

2 Comments

Comments

4 Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related