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 !

(2020) Using JS getPropertyValue("--src") See: jsfiddle.net/CustomElementsExamples/vjfpu3a2 — Danny '365CSI' Engelman
– Danny '365CSI' Engelman, Commented Mar 13, 2020 at 15:40

XYZ · Accepted Answer · 2017-02-23 03:56:33Z

10

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

edited Feb 23, 2017 at 3:56

answered Feb 23, 2017 at 3:46

XYZ

27.8k15 gold badges98 silver badges168 bronze badges

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

9 Comments

Ali Gajani Over a year ago

He can't modify the HTML, so I assume he can't add the class on the image.

XYZ Over a year ago

change to element selector then

Mayur Randive Over a year ago

It worked , content url overwrites the src of img tag

pol Over a year ago

This may work on Chrome, but it won't work on Firefox

Mayur Randive Over a year ago

Thanks Li and Ali for your time and thoughts .. :) have a great day

|

pol · Accepted Answer · 2017-02-23 04:02:19Z

4

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>

edited Feb 23, 2017 at 4:02

answered Feb 23, 2017 at 3:54

pol

2,70112 silver badges16 bronze badges

3 Comments

Mayur Randive Over a year ago

will try this and let you know in sometime , thanks pol for your time !

Deepak Yadav Over a year ago

@MayurRandive can you use jQuery/Javascript?

Mayur Randive Over a year ago

@ Deepak Yadav : No

wpcoder · Accepted Answer · 2017-02-23 04:34:56Z

2

Good question to learn about unnoticed selectors using CSS,

Additionally, You can read more about other selectors,

For example:

img: hover {}

and some other nice selectors for different range of elements

:active

:after

:before

:first-child

:first-letter

:first-line

:focus

:hover

:lang

:link

:visited

You can even conditionally select like this:

img[src="setting-icon.png"] {
    border: 1px solid #000000;
    content:url("/new/image/source.png");
}

Reference: W3.org - Advanced Selectors

answered Feb 23, 2017 at 4:34

wpcoder

4475 silver badges15 bronze badges

Collectives™ on Stack Overflow

Replace src of Image tag using css property

3 Answers 3

9 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related