html - Why doesn't -moz-background-size:cover work in Firefox?

Question

I'm coding a site that contains 3 wide images which need to have 100% width at all times. I'm using media queries and I would rather not have to make 3+ copies of each image to make them fit.

This is the CSS I want on the images:

#artwork1 {
    width: 1500px;
    height:500px;
    background-image: url(../img/menupic_1.png);
    background-repeat:no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;    
}

Here is a jsFiddle link: http://jsfiddle.net/RtPEA/. The link just contains the three <div>s that need a background that resizes.

I have used background-size:cover; on a lot of sites, but in Firefox, it doesn't seem to work on this one.

I have also tried various jQuery plugins. While I did find some that had some success, they did not work on iOS.

Answer 1

You need to add background-size after the prefixed versions:

#artwork1 {
    width: 1500px;
    height:500px;
    background-image: url(../img/menupic_1.png);
    background-repeat:no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

• http://jsfiddle.net/RtPEA/5/

-moz-background-size was only supported in Firefox 3.6, and the other prefixed versions aren't guaranteed to stick around.