Ok, this is a new one to me. On the Ryuzine project (the major update started months ago, got put on the back burner, and is now nearly done) I wanted to use background images that scale to fit or fill the webapp’s background. Easy, right? Just use “background-size: cover” or “contain” or – “100%” etc.
Except the image wasn’t showing up at all in Firefox 30+. However if I switched it to something like “background-size: 1024px 800px” that would actually show the scaled image. After searching Stack Overflow and going to Mozilla’s dev site and looking at more bugs than an entomologist I ended up doing what I usually end up doing in this situation: try changing the code in Firebug until something works. Well that’s how I found it. Apparently in order to get “cover,” “contain,” or scaling by percentages to work with “background-size” in Firefox we now have to make certain to include “background-attachment: fixed” or the image simply won’t show up. I’m not entirely sure but this might also have something to do with the fact that, in my webapp, both the <html> and <body> elements are positioned absolutely, because if I switched them to “relative” the scaled image would show up (but I’d end up with scrollbars I didn’t want). So all I can say for certain is that, if the body and/or the html element containing it are set to “position: absolute;” it seems Firefox now is a stickler for also specifying the background image attachment is “fixed.” I’ve no idea if this is a bug or if this is how the W3C spec says it’s supposed to work and everyone else is just too forgiving? Anyway, I figured it out. Onward to the next thing I need to fix…because I’d really like to get this update behind me.