Replace src of Image tag using css property

Question

Is there any way by which i can replace the image mentioned in SRC attribute of image tab using any of css trick ?

<img src = "setting-icon.png"></img>

i want to replace the setting-icon.png with css property, I am able to put another image in background with background-image property of image tag but i need to hid the one mentioned in src and show what the one i mention in background-image property in css.

Yes this is weird requirement but the thing is i am doing customization in a third party application where i only have control over css, I can not modify the HTML tags.

thanks for reading through !

Answer 1

You can't change the html attributes values with CSS, only javascript.

But, with CSS you can "hide" the image and put a background in its place.

div img {
  height: 0;
  width: 0;
  padding-top: 175px;
  padding-left: 280px;
  background-image: url("http://www.planwallpaper.com/static/cache/6f/82/6f8200c95d588fde83d1f212f674611a.jpg");
}

<img src="http://www.planwallpaper.com/static/cache/a1/4e/a14e880ef245c3d159ba96ebbeb4c8c3.jpg">

<div>Changed img:</div>
<div><img src="http://www.planwallpaper.com/static/cache/a1/4e/a14e880ef245c3d159ba96ebbeb4c8c3.jpg"></div>

Answer 2

You can use content:url("image.jpg")

https://developer.mozilla.org/en-US/docs/Web/CSS/content

In your CSS,

.img {
    content:url("/new/image/source.png");
}

If you cannot modify HTML,

img {
    content:url("/new/image/source.png");
}

In HTML,

<img class="img"/>

I have not try this yet, but I not sure if the inline attribute src will overweight the CSS content.

Update

It should work if you already have src for your img element. Thanks @pol