Content url does not display image on firefox browser

Question

.googlePic{
    content: url('../../img/googlePlusIcon.PNG');
    margin-top: -6.5%;
    padding-right: 53px;
    float:right;
    height: 19px;

}

This is an example of my class googlePic in my css file. It works out and prints out nicely on google chrome and safari. however, it doesn't work on firefox. Nth gets printed out. Please help :)

I don't think you can use 'content' that way. Use 'background' instead. — putvande, Jul 28 '13 at 11:47
Check if this helps: http://stackoverflow.com/questions/12262118/content-url-is-not-working-in-firefox — Harry, Jul 28 '13 at 11:52

score 30 · Answer 1 · edited Jan 07 '17 at 07:20

30

The content property works with ::before and ::after.

googlePic::before
{
 content: url('../../img/googlePlusIcon.PNG');
}

Read this: http://www.htmldog.com/reference/cssproperties/content/

IE8 only supports the content property if a !DOCTYPE is specified.

edited Jan 07 '17 at 07:20

John

1
13
98
177

answered Jul 28 '13 at 11:50

Mohammad Mahdi Naderi

2,975
2
14
9

6

In Firefox, :before did not work for me, but :after did, as reported by Ahetesum Ali – CyberMonk Sep 02 '15 at 23:58

0MBB0 · Answer 2 · 2014-06-20T12:36:22.577

22

I know this may be a late response, but i came across the same problem.

I looked it up and somehow an url is not a valid 'content' type and even tho Chrome and Safari are being the good guys and show it nicely.

What worked for me, was creating an empty 'content' and using a background to show the image: it works nicely in Chrome, Firefox, Safari and IE8+9

.googlePic:before {
    content: '';
    background: url('../../img/googlePlusIcon.PNG');
    margin-top: -6.5%;
    padding-right: 53px;
    float:right;
    height: 19px;
}

edit: forgot to put the :before after the classname

edited Jun 20 '14 at 12:36

answered Jun 12 '14 at 13:12

0MBB0

221
2
4

This is the solution and should be marked as the answer. For some reason some browsers don't accept url as content. – Abdul Sadik Yalcin Nov 26 '15 at 13:23
1

Is there anything else to try after this does not work? – ArtforLife Apr 28 '16 at 13:45

score 16 · Answer 3 · answered Mar 27 '14 at 08:34

16

you have to write two css class in style

.googlePic
{  /*this for crome browser*/
    content: url('../../img/googlePlusIcon.PNG');
    margin-top: -6.5%;
    padding-right: 53px;
    float:right;
    height: 19px;

}

.googlePic: after
{  /*this for firefox browser*/
    content: url('../../img/googlePlusIcon.PNG');
    margin-top: -6.5%;
    padding-right: 53px;
    float:right;
    height: 19px;

}

and its works for me :)

answered Mar 27 '14 at 08:34

DropAndTrap

1,538
16
24

5

Nothing for me. Firefox and IE - no reaction – Chaki_Black Dec 04 '14 at 09:43
3

In my case :after pseudo element gets Firefox to render, but not :before – icelava Feb 16 '15 at 08:58
i am not a expart in css just found the above answer later changes the before to after it worked – DropAndTrap Jun 08 '15 at 09:15
1

Is there anything else to try after this does not work? – ArtforLife Apr 28 '16 at 13:45
2

The after works for me. Be careful, remove the space between : after `.googlePic:after { /*this for firefox browser*/ content: url('../../img/googlePlusIcon.PNG'); margin-top: -6.5%; padding-right: 53px; float:right; height: 19px; }` – Mohammad Hammadi Jul 13 '17 at 10:25
It didn't work like that for me either. I managed with `#image { content: ''; background-image: url("../../img/googlePlusIcon.png") !important; background-repeat: no-repeat; height: 33vw; width: 100%;}` – s3c Dec 18 '19 at 17:39

score 6 · Answer 4 · answered Sep 23 '14 at 13:07

The best way to handle images throughout all web browsers is to use the background css property with the background-size. However, IE8 and lower version won't support it (represent 2% of viewer in 2014)

.googlePic{
    background: url('../../img/googlePlusIcon.PNG') -6.5% 53px no-repeat;
    background-size: contain;
    float:right;
    height: 19px;
}

score 4 · Answer 5 · answered Oct 28 '20 at 06:32

4

I simply added 'alt' and it was working with without using Pseudo classes

answered Oct 28 '20 at 06:32

Prabhjyot Gambhir

99
3

Wow! That's crazy. This fixed it for me too. I'm in awe that the solution is this simple. Great eye. – Feign Oct 22 '21 at 00:05

score 3 · Answer 6 · answered Jan 21 '20 at 19:28

3

If you change the tag to a div and not a img , content should work in firefox.

answered Jan 21 '20 at 19:28

rupy

49
3

score 1 · Answer 7 · answered May 05 '17 at 14:16

This saved me. Remember to remove alt attribute from the img or you will find the alt and the actual image in Firefox.

   .googlePic, .googlePic:after{
        content: url('../../img/googlePlusIcon.PNG');
        margin-top: -6.5%;
        padding-right: 53px;
        float:right;
        height: 19px;
    }

score 1 · Answer 8 · edited Jul 03 '20 at 23:32

1

Adding the alt attribute to the img tag and then using content="url('...')" will work in firefox. For e.g.:

<img class="my-image" alt="myImage" />

.my-image {
  content: url("...");
  width: 10px;
  height: auto;
  display: inline-block;
}

edited Jul 03 '20 at 23:32

Tim Fuchs

1,171
6
15

answered Jul 03 '20 at 09:47

Ajmal Ebrahim

11
1

Doing this causes the image to look larger in Chrome for me. – MARS Dec 15 '20 at 22:53

score 0 · Answer 9 · answered Apr 28 '16 at 14:50

I had the same problem recently and none of the solutions above worked for me. I have resorted to the following work-around.

I included Bootstrap in my projects and used its img-responsive class. After that, I simply include the image using the <img class="img-responsive"> tag. It displays and scales beautifully on every browser and every viewport size.

Hopefully this is helpful to someone.

score 0 · Answer 10 · edited Oct 24 '19 at 01:44

I came across the same problem, in my case I was not able to show the image using content:url(). I wanted to display waiting gif in one div. I don't know the details of Mozilla support. But it is resolved in my case by the following code.

.img_div{
    background-image: url("wait.gif");
    height: 20px;
    width: 20px;
    background-size: contain;
    border: none;
}

It is working on Chrome 73 and Firefox 66.

score -1 · Answer 11 · answered Jun 19 '20 at 00:08

-1

worked for me this way.had to put file/// and then url.
file///C:/user/s/desktop.......jpg

answered Jun 19 '20 at 00:08

sam

1

background-image: url(file///C:/user/s/desktop.......jpg) – sam Jun 19 '20 at 00:10

score -4 · Answer 12 · edited Mar 29 '21 at 05:50

-4

You can experiment with setting height and width to 0, add a padding and set the background image. You will have to make it display: block or display: inline-block for the height to take effect.

Here is an example: http://jsfiddle.net/zBgHd/1/

edited Mar 29 '21 at 05:50

Glorfindel

21,988
13
81
109

answered Feb 24 '15 at 11:32

himanshu bharti

1
1

Please edit the externally hosted code into the post; doing so will make sure it remains useful even if the link breaks. My script [is not allowed to do this](https://meta.stackoverflow.com/a/344512/4751173) because of potential licensing problems. – Glorfindel Mar 29 '21 at 05:50

Content url does not display image on firefox browser

12 Answers12

Linked

Related