Displaying Images with Content URL in Firefox

An issue has been encountered where certain browsers, specifically Firefox, fail to display images when referencing them using the content property. This can be seen in the provided CSS class:

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

While this CSS works as expected in Google Chrome and Safari, it fails to render any image in Firefox.

Solution:

The content property can only be used with pseudo-elements such as ::before and ::after. To resolve the issue, we need to modify our CSS class as follows:

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

Explanation:

The content property works by inserting content before or after an element. By using ::before, we're inserting the image before the .googlePic element, which allows Firefox to display it correctly.

Further Reading:

For more information on the content property, refer to this article:

• http://www.htmldog.com/reference/cssproperties/content/

Note:

Internet Explorer 8 only supports the content property if a !DOCTYPE is specified.