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.
I'm not sure what's going on, but it works if you have:
http://jsfiddle.net/nstV7/3/
My guess is that the
background
property is overriding thebackground-size
property. However, that doesn't explain why Firefox is not behaving the same as Safari.