replace current html image with css

Question

I am having issues trying to replace this image with CSS, I have no access to the html.

<img 
  width="64" 
  height="64" 
  border="0" 
  style="width: 64px; height: 64px;" 
  src="http://www.nitrografixx.com/2013/lock-icon.gif">
</img>

I tried this, and while it adds the image as a background to the current image, it doesn't replace it.

img[src='http://www.nitrografixx.com/2013/lock-icon.gif'] {
  background: url(http://www.nitrografixx.com/2013/lock_bg.jpg) center !important;  
}

Your code it's working properly. You are 'saying' to CSS that when he finds an img element with attribute src with that given url as his attribute value, then change the background image of your img element into the one you written at his background property on CSS. You have to change background property into content — DaGLiMiOuX
– DaGLiMiOuX, Commented May 15, 2013 at 12:31
If you have Javascript, you'll be better off using that instead of CSS, because you can simply directly access the image and change it, instead of trying to apply a content attribute via CSS. — Chris Krycho
– Chris Krycho, Commented May 15, 2013 at 12:33
Img tags are self containing tags you dont need a closing tag. — Cam
– Cam, Commented May 15, 2013 at 12:50

PSR · Accepted Answer · 2013-05-15 12:49:26Z

8

try this

<style>
.className{
    content:url("http://www.nitrografixx.com/2013/lock_bg.jpg");
}
</style>
<img class="className"/>

edited May 15, 2013 at 12:49

answered May 15, 2013 at 12:29

PSR

40.4k43 gold badges115 silver badges154 bronze badges

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

7 Comments

Klors Over a year ago

As the OP has no access to the HTML, you'd need to change .className to img[src='http://www.nitrografixx.com/2013/lock-icon.gif']?

Chris Krycho Over a year ago

This is definitely the way to go… in CSS (so: good answer to the question as asked). But Javascript would be a much better way of handling the issue.

Klors Over a year ago

Also, the URL you've used is the one that was there already, he'd want the content: url("http://www.nitrografixx.com/2013/lock_bg.jpg"); I think.

user2250423 Over a year ago

adding the content, did not replace the image either, any more ideas ?

Klors Over a year ago

It will depend upon the browser you are using, it works in the latest Chrome, but not IE10. I see a pink image instead of the lock. jsfiddle.net/ES4mH/47

|

Rob · Accepted Answer · 2013-05-15 12:43:56Z

3

What you are doing is adding the image to the background of the image element but the image element still has the source attribute pointing to the original image and that's why it's not being removed. You should probably use javscript to remove the element and replace it with something else if that's possible.

edited May 15, 2013 at 12:43

answered May 15, 2013 at 12:30

Rob

15.2k30 gold badges49 silver badges73 bronze badges

2 Comments

user2250423 Over a year ago

i do not have access to the html and can not add an java to the site, i can only alter existing css

Rob Over a year ago

@user2250423 Java is not javascript. Javascript is available in virtually all browsers.

Collectives™ on Stack Overflow

replace current html image with css

2 Answers 2

7 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related