CSS Background URL Does Not Work in Firefox

advertisements

Please explain to me why this does not work in FireFox

<img class="icon-expand" />

CSS

.icon-expand {
    background: url('../images/expand-plus-icon-24.png') no-repeat;
    height: 24px;
    width: 24px;
    cursor: pointer;
    margin: 0 3px;
}

Chrome, Edge and IE11 show it fine. But why FireFox acting silly and shows nothing? Path is correct.


Some Considerations: <img> tags and inlining styles

Since you are using an actual <img> tag, you may want to consider either explicitly setting the src attribute to your target URL as opposed to using a CSS class :

 <img src='{your-expand-url}' />

Firefox is likely more strict when it comes to rendering <img> tags by requiring that they have an src attribute :

<img src='' class='icon-expand' />

You'll notice if you include a blank one that you receive the following :

Likewise, you could consider explicitly causing the element to render without a src attribute by using the display: block property on your CSS class :

.icon-expand {
    background: url('../images/expand-plus-icon-24.png') no-repeat;
    height: 24px;
    width: 24px;
    cursor: pointer;
    margin: 0 3px;
    /* This will cause your element to render as expected */
    display: block;
}

The Solution: Use a <div>

Since you are using background URLs through CSS, you should consider just using a <div> or similar element as opposed to an <img> tag, which is designed to target an image directly :

<div class="icon-expand"></div>

Example

.icon-expand {
  background: url('http://megaicons.net/static/img/icons_sizes/8/60/24/imagetools-expand-icon.png') no-repeat;
  height: 24px;
  width: 24px;
  cursor: pointer;
  margin: 0 3px;
}
<div class="icon-expand"></div>