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.
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 theurl()
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.
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; ...
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 ischrome://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 addresschrome://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.ooh, thanks for the explanation, I’m sure I understand better how this works. 💙