Did Firefox 126 break content/newtab_background_image.css?

[BillyJoeJimBob]

Thank you kindly for your work on this site. I am using content/newtab_background_image.css which set the background image for my home/newtab page until FF 126, but it is no longer functioning. I removed userChrome.css and all other userContent.css settings, replaced the code from this site again as follows, but it is still not showing any image. Below is what I used which functioned prior to FF 126, but no longer provides a background image:

/ Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/content/newtab_background_image.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. /

@-moz-document url("about:newtab"), url("about:home"){
  body{
    /* This will load image.jpg stored in the same folder as this file */
    background-image: url("XP_Bliss.jpg"); 
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: `fixed;`
    background-position-x: center;
    background-position-y: bottom;
  }
}

[MrOtherGuy]

Firefox 126 includes support for built-in background-images for newtab. The feature is disabled by default, but its styling rules exist nonetheless. So, to use this style you need to simply add !important tag after the background-image property to override the built-in styles. I've updated the style to fix this.

You can test the built-in feature by setting browser.newtabpage.activity-stream.newtabWallpapers.enabled to true in about:config - at least for now the feature does not allow you to use your own images though.

[BillyJoeJimBob]

MOG Awesome! Thank you.
I noticed background: url(image.jpg) !important ; produces the same result cosmetically as background-image although I'm not sure if there is any functional difference.

Also, on a sort of related note, I am using random Unsplash web wallpapers which are different every time I restart Firefox instead of local static images, which work well, if anyone is interested. See:

Lorem Picsum https://picsum.photos/

Unsplash https://unsplash.com/developers

[MrOtherGuy]

Yeah so, background is a shorthand-property that sets multiple individual properties at once. background: url(image.jpg) !important expands to this:

background-color: rgba(0, 0, 0, 0);
background-position-x: 0%;
background-position-y: 0%;
background-repeat: repeat;
background-attachment: scroll;
background-image: url("image.jpg");
background-size: auto;
background-origin: padding-box;
background-clip: border-box;

That can be visually the same as what the style does, but only if the image is the same size as the viewport and the page is not scrolling. If you play with the window dimensions you'll see how the behaviors differ.

Also, I only made the background-image property important, so Firefox will use internal styling rules for those other properties. As it happens, the values used by Firefox are the same as what I had used, with the exception of background-position-y where Firefox 126 uses center but my code used bottom - this means that if the aspect-ratio of the viewport becomes such that it is "wider" than the image's natural aspect-ratio then with 126 the image "focuses" on the center of the image - whereas before the image bottom edge always meets the bottom of the viewport and image gets cut from the top.

This old behavior can then be forced by adding !important tag to the background-position-y property.