hi, I’m asking for help to solve this inconvenient when I try to replace the default wallpapers in newtab page. Fist of all I’m using the developer Firefox version that use beta version to do this.

I have activated this preference in about:config page:

browser.newtabpage.activity-stream.newtabWallpapers.enabled to true

after that I replaced the wallpapers thumbnails successfully with the next code:

/* Miniaturas de wallpapers */
    
/* Dark */
    
.wallpaper-input.dark-landscape { background-image: url("../newtab/wallpaper-dark.png") !important; }
    
.wallpaper-input.dark-panda { background-image: url("../newtab/wallpaper-dark2.png") !important; }
    
.wallpaper-input.dark-color { background-image: url("../newtab/wallpaper-dark3.png") !important; }
    
.wallpaper-input.dark-sky { background-image: url("../newtab/wallpaper-dark4.png") !important; }
    
.wallpaper-input.dark-mountain { background-image: url("../newtab/wallpaper-dark5.png") !important; }
    
.wallpaper-input.dark-beach { background-image: url("../newtab/wallpaper-dark6.png") !important; }

but when I try to replace the wallpaper for the first image in newtab page it don’t work with the path I used to use, for example this code:

body:has(#dark-landscape[aria-checked="true"]){
--newtab-wallpaper-dark: url("../newtab/wallpaper-dark.png") !important;
    }

and only works when I use a url for the new image like this:

body:has(#dark-landscape[aria-checked="true"]){
--newtab-wallpaper-dark: url(https://i.imgur.com/It1Ugaa.png) !important;
}

so I wonder if is my mistake or is a Firefox bug, or maybe there is a trick to solve it? cause I would like to use local images and not urls.

  • @MrOtherGuyM
    5•5 months ago

    Sounds like what’s happening here is that the relative path you have given doesn’t resolve to what you think it does. See, the variable --newtab-wallpaper-dark is used by an internal style sheet, so when the url() actually gets resolved it will be relative to the internal style sheet address - not to the file path of userContent.css.

    So, a workaround would be to give it an absolute file path or override the property where that variable is actually used.

    • @GodieOP
      2•5 months ago

      thanks for the answer, I searched where the variable is used and added !important and that fixed, I don’t know why but all right jeje:

      body{
    background-image: var(--newtab-wallpaper-dark, "") !important;
    ...
      • @MrOtherGuyM
        1•5 months ago

        Right, that makes perfect sense. The property being a variable nor it having an important tag are not meaningful to explain what’s happening here.

        What is important is simply what the address of the .css file is which sets the background-image property, because relative url resolves relative to that. The internal style sheet where this background-image property is set is chrome://activity-stream/content/css/activity-stream.css. So if the url it uses is ../newtab/wallpaper-dark.png (as by you setting the variable as such) then it will try to load an image from address chrome://activity-stream/content/newtab/wallpaper-dark.png which surely doesn’t exist.

        But if you set background-image property from within userContent.css then the relative url resolves relative to that instead.

        • @GodieOP
          1•5 months ago

          ooh, thanks for the explanation, I’m sure I understand better how this works. 💙