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;   
    }
}

score 22 · Accepted Answer · edited May 23 '17 at 12:33

22

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;   
    }
}

edited May 23 '17 at 12:33

Community

1
1

answered Apr 11 '13 at 14:42

BoltClock

700,868
160
1,392
1,356

This gotcha has two layers. suppose you run code multiple times on the page, you don't necessary call the css class (including all the common attributes, thus no url), but specify it at each instance. in that case the background-url is after your css defined class and the size will be ignored. https://developer.mozilla.org/en-US/docs/Web/CSS/background is useful and concise to get this right. – Jerome Sep 18 '19 at 06:41
OMG. How stupid I was! _> Your background-size is placed before your background shorthand..._ – Vladan Nov 07 '19 at 16:16

score 1 · Answer 2 · answered Feb 06 '17 at 16:37

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)

score 0 · Answer 3 · edited Apr 11 '13 at 13:57

0

.. because they have another css format:

-webkit-background-size: cover; //safari chrome
-moz-background-size: cover; // firefox
-o-background-size: cover; // opera

edited Apr 11 '13 at 13:57

Zoltan Toth

46,981
12
120
134

answered Apr 11 '13 at 13:56

FelixH

135
1
2
14

According to this https://developer.mozilla.org/en-US/docs/CSS/background-size#Browser_compatibility they no longer require the -moz prefix. I did try it with the prefix and it didn't work. – evilscary Apr 11 '13 at 13:58

Firefox and Chrome ignoring background-size?

3 Answers3

Linked