CODEWITHSUNDEEP
cssbackgroundiconsbackground-image
TetraDev
TetraDev

Reputation: 17094

CSS Background URL does not work in Firefox

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.

Upvotes: 0

Views: 706

Answers (4)

Arief Suherlan
Arief Suherlan

Reputation: 21

Maybe you can try like this: 

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

or maybe this topic could help you: Background image is not displayed in Firefox

Upvotes: 1

Jaqen H&#39;ghar
Jaqen H&#39;ghar

Reputation: 16804

<img> is an inline element.

If you want to have background image set to it you should add a display: block to the css.

This is not highly recommended though.

Unless you are certain that you want to use an <img> with background you better choose another option like changing it to a <div> or use the src attribute.

Upvotes: 0

user1724434
user1724434

Reputation: 698

Try this...

<div class="icon-expand" />

Upvotes: 0

Rion Williams
Rion Williams

Reputation: 76557

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 :

enter image description here

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>

Upvotes: 1

Related Questions