Content Url Does Not Display Image on Firefox Browser

Content url does not display image on firefox browser, is there a work around that doesn't require removing alt tags?

I have ended up changing all my content:url css to also include the :after which works with firefox.

.AnImage, .AnImage:after{ 
  content: url("images/Home/2560/SimonAndGeorgia.jpg");
}

Coupling with this javascript code to remove the alt tags within firefox:

 // Firefox 1.0+
    if (typeof InstallTrigger !== 'undefined') {
        //alert("we are using firefox");
        var elements = document.getElementsByTagName('img');
        for (var i = 0, len = elements.length; i < len; i++) { 
     elements[i].removeAttribute('alt'); }
    }

Thus the alt tags are there for SEO, however are removed when using Firefox.

Css content Image not showing up on Firefox

content is not meant to be used this way. It's use is limited to :before and :after pseudo elements.

In your case, the best option is to use background-image instead:

.post-content-contract {
    background-image: url(contract.png);
    background-size: cover;
    width: 100px;
    height: 80px;
    ...
}

firefox don't dispaying images in css (content, url)

Because the image is inline element. So you can set display to block or inline-block.

JSBIN.

content url is not working in Firefox

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.

Image loading fails for Firefox but runs fine for Chrome, Edge and IE

First you should clear cookies and cache, or reset Mozilla settings to default. If it is still not working, reinstall Mozilla Firefox.

---

Related Topics