Change content in img through CSS

Question

Relevant JSFiddle - http://jsfiddle.net/Efqda/

CSS -

.social img {
    width: 128px;
    height: 128px;
    opacity: .5;
}

.social img:hover {
    opacity: 1.0;
}

.social #facebook img {
    content: "https://raw.github.com/danleech/simple-icons/master/icons/facebook/facebook-128-black.png";
}

HTML -

<a href="facebook.com"><img class="social" id="facebook"></a>

How do I get the image to show up? I don't get any errors in the console.

You shouldn't use an `img` tag if there's no `src`. It confuses browsers. — Brigand, Aug 03 '13 at 07:08
Looks like a repeat of http://stackoverflow.com/questions/2182716/how-can-we-specify-src-attribute-of-img-tag-in-css/11484688#11484688 — Johnny Li, Aug 03 '13 at 07:08
7 answers and they are all wrong in some way. Surely someone will answer correctly soon... — thirtydot, Aug 03 '13 at 07:25
@thirtydot Check my updated answer hope that the explanation is straight forward — Ayush, Aug 03 '13 at 07:36
@Ayush: Not quite. Try your demo in Firefox or IE, for example. — thirtydot, Aug 03 '13 at 07:40

score 4 · Accepted Answer · edited May 23 '17 at 11:56

To fix your code, first of all you would need to fix the selectors. For example, .social img means every <img> element which is a child of another (not the same) element with class social. Also all id's must be unique so there is no need for .social #facebook, .#facebook is just enough.

However, this approach is flawed from the outset because using CSS to set the src of an img (content: url("http://....");) only works in Chrome (and other WebKit browsers).

You should use the following approach instead:

a[href="http://facebook.com"] {
    background: url("https://raw.github.com/danleech/simple-icons/master/icons/facebook/facebook-128-black.png") no-repeat;
    width: 128px;
    height: 128px;
    opacity: .5;
    display: inline-block;
}
a[href="http://facebook.com"]:hover{
    opacity: 1.0;
}

with this HTML markup:

<a href="http://facebook.com"></a>

Fiddle here

See also:

Define an <img>'s src attribute in CSS

This is now a reasonable answer. I zapped the first set of code because nobody should ever use it, since it only works in WebKit browsers and is overall a bad idea. Feel free to revert if you disagree. — thirtydot, Aug 03 '13 at 17:22
@thirtydot - thanks for the cleanup of my post, there really is no need to post a code that doesn't work in all browsers. BTW, I'm not a native speaker so thanks again for the correction of the text. — Petr R., Aug 04 '13 at 10:14

score 1 · Answer 2 · answered Aug 03 '13 at 07:06

1

use the following

 img.social {
    background :url(/facebook-128-black.png) no-repeat;
    width: 128px;
    height: 128px;
    opacity: .5;
}

answered Aug 03 '13 at 07:06

bhai

305
3
9
19

Maybe you meant `img.social`? – Cthulhu Aug 03 '13 at 07:08

score 1 · Answer 3 · answered Aug 03 '13 at 07:09

Couple of issues, your CSS selector is wrong, if you have an id then just use that, also you need to specify that the content comes from an external source using url()

#facebook {
    content: url("https://raw.github.com/danleech/simple-icons/master/icons/facebook/facebook-128-black.png");
}

score 0 · Answer 4 · edited Aug 03 '13 at 07:24

0

img.social {
  width: 128px;
  height: 128px;
  opacity: .5;
  background-image:url(https://raw.github.com/danleech/simple-icons/master/icons/facebook/facebook-128-black.png);
}

Also your link href is wrong.. it should be

<a href="http://www.facebook.com">
   <img class="social" id="facebook">
</a>

edited Aug 03 '13 at 07:24

Naveen Kumar Alone

7,536
5
36
57

answered Aug 03 '13 at 07:09

Venkata Krishna

14,926
5
42
56

Naveen Kumar Alone · Answer 5 · 2013-08-03T07:17:34.480

0

Here is JSFiddle

Please change your .social #facebook img {...} as #facebook {...}

Because you have to set image url to img tag id

And also change contect:... to content:url("");

Because you need to set content url from where you have to get image.

Like

#facebook {
  content: url("https://raw.github.com/danleech/simple-icons/master/icons/facebook/facebook-128-black.png");
}

edited Aug 03 '13 at 07:17

answered Aug 03 '13 at 07:10

Naveen Kumar Alone

7,536
5
36
57

score 0 · Answer 6 · answered Aug 03 '13 at 07:11

0

With css you just can to set bacground image.

With js you can set src attribute.

answered Aug 03 '13 at 07:11

Alex Pliutau

21,392
27
113
143

Ayush · Answer 7 · 2013-08-03T07:27:53.317

Your Issue was that you need to enclose your image URL inside url() in content and linking of CSS. Either use Class or ID but not both.

According to your style sheet .social #facebook img

there is a class social inside that there is an element with id facebook and inside an element img.

here you can see an example matching your CSS style.JSFiddle

and here is a straight forward solution JSFiddle

You can also use in-line CSS

<a href="facebook.com">
    <img class="social" id="facebook" style="content: url(https://raw.github.com/danleech/simple-icons/master/icons/facebook/facebook-128-black.png&quot;);"/>
</a>

Change content in img through CSS

7 Answers7

Fiddle here