CSS: Can't get background-size: contain to wor

Question

According to Mozilla Developer Network background-size has been supported since Firefox 3.6, however, it is clearly not working in my OS X version of Firefox 5. It looks fine in Safari, but Firefox 5 is not displaying it correctly. Is there a bug? Why can't I get this to work in Firefox?

HTML:

<span class="special button">My button</span>

CSS:

.button {
    background-size: contain;
}
.button.special {
    background: url("/images/special-button-bg.png");
}

Here is a jsfiddle which shows that it is not working correctly.

Answer 1

I recently had the same problem with this in the follow scenario: Win10 + Firefox 55.0.3 64its, the background-image not showing

I tested with some other browsers and was ok, I could see the image. eg.: with Win10 + MS Edge and Win10 + IE11 was working correctly

Because I did not want to use JavaScript or Vendor Prefix ( -moz- etc. ) I went to w3c.org trying to search what was wrong, unfortunately I did not found the solution but I decided to try to declare all values:

I changed this:

background-size: contain;

Into this:

background-size: contain contain;

I published and tested, and it's working in the following:

1. Win10 + MS Edge
2. Win10 + MS IE 11
3. Win10 + Firefox 55 / 64 bits
4. Win10 + Opera
5. Win Server 2008 + FireFox 55 / 32bits
6. Win Server 2008 + MS IE 11
7. Win Server 2003 + FireFox 52 / 32bits
8. Win Server 2003 + MS IE 6
9. Win 7 + FireFox 54 / 32bits
   10. Win 7 + MS IE 11

I hope this helps someone which wants to avoid the use of Browser Script languages or vendor prefixes.

Answer 2

I'm not sure what's going on, but it works if you have:

.button.special {
    background: url("/images/special-button-bg.png");
    background-size: contain;
}

http://jsfiddle.net/nstV7/3/

My guess is that the background property is overriding the background-size property. However, that doesn't explain why Firefox is not behaving the same as Safari.