Why Doesn\'t Firefox Display Images Using CSS `content: url()`?

Firefox Not Displaying Image Declared Using content URL

In the context of CSS styling, the content property is utilized to add content before or after an element. However, a common issue arises when using the content property to display an image in Firefox while it functions seamlessly in other browsers like Google Chrome.

Consider the following CSS class used to add an image to an element:

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

When this class is applied to an element, the image does not display in Firefox. To resolve this issue, it's necessary to use the content property in conjunction with either ::before or ::after pseudo-elements. By wrapping the image declaration within a ::before pseudo-element, Firefox will correctly display the image.

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

It's important to note that in IE8, the content property will only be supported if a !DOCTYPE is specified.

The above is the detailed content of Why Doesn\'t Firefox Display Images Using CSS `content: url()`?. For more information, please follow other related articles on the PHP Chinese website!