We're calling on all EU-based Mozillians with iOS or iPadOS devices to help us monitor Apple’s new browser choice screens. Join the effort to hold Big Tech to account!

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Background on body with cover or contain size does not render

  • 2 ŋuɖoɖowo
  • 1 masɔmasɔ sia le esi
  • 1 view
  • Nuɖoɖo mlɔetɔ cor-el

more options

The background images on my site do not render correctly in Firefox Quantum. There are three PNG images specified on the <body> tag: the positions for each are left, right, and center respectively. The sizes for each are contain, contain, and cover respectively. None of the images render in Firefox unless I disable the "background-size" property completely. They also do not render if "background-size: 100%" is specified, but they do render if I provide a pixel value.

These images render perfectly fine in Chrome, Edge, and IE 11, but not in FF Quantum (57.0.2, Win10 x64).

The background images on my site do not render correctly in Firefox Quantum. There are three PNG images specified on the <body> tag: the positions for each are left, right, and center respectively. The sizes for each are contain, contain, and cover respectively. None of the images render in Firefox unless I disable the "background-size" property completely. They also do not render if "background-size: 100%" is specified, but they do render if I provide a pixel value. These images render perfectly fine in Chrome, Edge, and IE 11, but not in FF Quantum (57.0.2, Win10 x64).

All Replies (2)

more options

They may render now in the others, does not mean in the future. Firefox is taking code a little to literately at the moment. Not sure of the fixes for it. But do know that anything that passes W3C - Who make the rules for web code should run if corrected.

HTML https://validator.w3.org/ CSS https://jigsaw.w3.org/css-validator/ and https://validator.w3.org/i18n-checker/ and http://mobile.css-validator.org/

Please let us know if this solved your issue or if need further assistance.

more options