content url is not working in Firefox

Question

My CSS file is:

        #name_wrong_img
        {
           width:43px;
           height:29px;
        }

This is my HTML code:

         <img id="name_wrong_img" src="wrong.jpg" />

The above code is working well in both Firefox and Chrome.

        #name_wrong_img
        {
           content:url(wrong.jpg);
           width:43px;
           height:29px;
        } 

         <img id="name_wrong_img"  />

This is working well in Chrome. But not in Firefox. What is the problem in this?

if you want to show wrong.jpg in name_wrong_img then you can use background:url; — Jassi Oberoi, Sep 04 '12 at 11:03
if you give image in CSS then there is no need to give IMG tag — sandeep, Sep 04 '12 at 11:07
This question should not have been closed. It is a valid question, clear to me what was asked, because I had the same question, and there is a clear and accepted answer below. — Steverino, Jan 27 '17 at 00:44

score 21 · Accepted Answer · answered Sep 04 '12 at 11:03

21

Firefox doesn't support the content property in the same way as Chrome — on img elements and/or when the source is an image.

<img> represents a content image. If you use it, it should have a src and an alt.

From the specification:

The src attribute must be present, and must contain a valid non-empty URL potentially surrounded by spaces referencing a non-interactive, optionally animated, image resource that is neither paged nor scripted.

answered Sep 04 '12 at 11:03

Quentin

914,110
126
1,211
1,335

7

You don't. If it is a content image you use an `` element and set its src in the HTML. – Quentin Sep 04 '12 at 12:23
1

But that's so much less useful than what Chrome does. Especially when you've got third-party libraries that rely on `content` to display images. Why can't Firefox mimic Chrome in this case? – aroth Sep 04 '14 at 01:59
Solution here: http://stackoverflow.com/a/17907900/213902 – Jerad Rose Apr 23 '15 at 14:15

content url is not working in Firefox

1 Answers1

Linked