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.