Firefox and Chrome ignoring background-size?

Question

I have a number of media queries in my site that resize various elements on pads/ smartphones. I've just added another media query to resize the same elements on lower-resolution laptops and discovered that Firefox and Chrome seems to be ignoring my use of background-size.

The media query is working, parts of them are being picked up, but not background-size. It works fine in safari.

Any ideas why?

My CSS is:

@media only screen and (min-height: 768px) and (max-height: 800px) {
    #title-we-are {
        background-size:95%;
        background: url(../img/title_we_are.png) bottom center no-repeat;
        height:254px;   
    }
}

Answer 1

Your background-size is placed before your background shorthand, so the shorthand overrides it with its default value (auto), preventing your previous background-size declaration from taking any effect. This is a common gotcha with using shorthand properties.

If this works in Safari, chances are that Safari hasn't updated its background shorthand to recognize background-size values, allowing your background-size to work.

You need to switch them around so your set background-size value can take effect:

@media only screen and (min-height: 768px) and (max-height: 800px) {
    #title-we-are {
        background: url(../img/title_we_are.png) bottom center no-repeat;
        background-size:95%;
        height:254px;   
    }
}

Answer 2

Additional Information: I have determined that using "background-image: url()" in chrome, background-size does not work.

Only when using the "background: url()" shorthand does background-size have any effect.

This is true as of Chrome 56.0.2924.87 (64-bit)