background-size: cover not working in Firefox Quantum


I recently restructured the page layout of my site to reduce the amount of wrapper <div>s needed. All is fine and dandy except for Firefox. I previously had a <div> that was the size of the browser viewport and contained all page content. This <div> had three background images that were layered and scaled based on viewport size so that the overall background looked correct on all device sizes. This was done with background-size: contain, contain, cover (image order was front-left, front-right, back-fill).

When I restructured the layout, the <body> tag replaced this <div> as the main viewport-sized container, so the background images are now placed on the body. In theory this should not have made a difference, and didn’t on Chrome, Opera, IE, and Edge. In Firefox Quantum, however, the background images simply do not render at all. If I remove the background-size specifier, they render, but are obviously sized wrong.

I filed this as a potential bug on the Firefox support forums, and was told by one person that “Firefox is handling this correctly and Chrome, Opera, IE, and Edge are all wrong”, and told by a second person to come here, which I have now done.

Was the first person right in saying that background-size: cover or background-size: contain on the body tag should make the background-image invisible, and that Chrome, Opera, IE, and Edge are all incorrect in handling this property as if it were on a <div> of the same size?

Or is this an actual bug in FF Quantum that needs to be addressed?

This behavior can be seen live here: The background should appear and scale correctly in Chrome, but not FF Quantum.


hmm, I’ve tried it too, and it doesn’t work for me.
I’d say that yeah for some reason after tweaking around with it FF Quantum isn’t supporting background-size. But the other issue is, it is just rendering the first image out of the 3 urls when the size property has been removed. Could be a potential bug.
I think it’s the position: fixed that’s causing it. Remove that and the images display as expected.
@BillyMoat oh, good eye! I didn’t even see that I had that property on <body>. Still, I feel like it’s a bug with Quantum. It rendered fine regardless in 4 other browsers, 2 of which are known for not rendering things correctly, and 2 of which are.
– briman0094
2 mins ago
No, it isn’t that because it’s rendering fine on chrome.