Content url does not display image on firefox browser - css

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 :)

Answer 1

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.

Answer 2

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

Answer 3

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 :)

Answer 4

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;
}

Answer 5

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

Answer 6

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

Answer 7

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;
}

Answer 8

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;
}

Answer 9

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.

Answer 10

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.

Answer 11

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

Answer 12

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/