Content Url Is Not Working in Firefox

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.

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.

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

CSS content: url() not working correctly with Firefox and Edge (even with ::before or ::after)

Try it this way

.k-task>span.k-icon.k-i-warning {
    width: 16px;
    height: 16px;
    -webkit-filter: invert(100%);
    -moz-filter: invert(100%);
    -ms-filter: invert(100%);
    -o-filter: invert(100%);
}
.k-event>span.k-event-actions>span.k-icon.k-i-warning:after {        
    content: '';
    background-size: contain;
    background-position: center center;
    background-image: url('{!URLFOR($Asset.slds, "assets/icons/utility/sync.svg")}') !important;
    margin-right: 10px; /*I am not sure why you need these*/
    margin-top: -5px;/*I am not sure why you need these*/
}

Firefox incompatibility with img content url

You can set the image as a background-image on the button element. No need to hassle with the img tag.

.dcweb_search {  height: 60px;  width: 60px;  position: relative;  top: -17px;  background-image: url('https://api.icons8.com/download/c5c8b5ba35e008ea471e9a53c5fa74c03ef6e78c/iOS7/PNG/256/Very_Basic/search-256.png');  background-size: 40px 40px;  background-position: center;  background-repeat: no-repeat;}

<label class="control-label"></label><br><button id="btn1" class="btn btn-warning shadow dcweb_search" disabled="true"></button>

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.

---

Related Topics