macosfirefoxfirefox-5css

CSS: Can't get background-size: contain to work in Firefox 5

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.

Solution

  • 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.