Why image files don't appear in loginscreen but appear in the Unlockscreen?

Question

I have a customized "mytheme.css" that used to be able to show the loginscreen and unlockscreen wallpapers or any other icons using the url command. Their paths used were specified relative to the "mytheme" directory, i.e. /usr/share/gnome-shell/theme/mytheme. For example,

/*login & unlock screens wallpaper*/
#lockDialogGroup {
  background: #2c001e url("assets/lockDialogGroup.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* switch colors */
.toggle-switch-us:checked {
  background-image: url("assets/toggle-on.svg");
}

However, recently somehow that syntax for the url command does not work for the loginscreen but works for the unlockscreen in Ubuntu 18.04. Meaning, I would be able to see my wallpaper in the unlockscreen but not in the loginscreen.

To fix this issue, I currently have to use the file command. However, doing so requires the full path of the wallpaper to be stated which is quite long. For example, the above lines with url command have to be revised to:

   background: #2c001e url(file:///usr/share/gnome-shell/theme/mytheme/assets/lockDialogGroup.jpg);

and

background-image: url(file:///usr/share/gnome-shell/theme/mytheme/assets/toggle-on.svg);

What I don't understand is that according to css, given that my theme's css file full path is /usr/share/gnome-shell/theme/mytheme/mytheme.css, the reference directory should be /usr/share/gnome-shell/theme/mytheme/, and if the full path of the wallpaper is /usr/share/gnome-shell/theme/mytheme/assets/lockDialogGroup.jpg, I should simply only need to declare a relative path like so to show the wallpaper:

  background: #2c001e url("assets/lockDialogGroup.jpg");

It is strange that this command works for the unlockscreen but does not work for the loginscreen. Bear in mind I had earlier set /usr/share/gnome-shell/modes/ubuntu.json to show:

{
    "parentMode": "user",
    "stylesheetName": "mytheme/mytheme.css",
    "enabledExtensions": [
        "[email protected]",
        "[email protected]"
    ]
}

So what gives?

Answer 1

Workaround by trail n error

OS: Ubuntu 18.04

In default Ubuntu 18.04 Installation, If you observe the file /usr/share/gnome-shell/theme/ubuntu.css which is configured for GDM and lockscreen...

some part of the file ubuntu.css is

/* switch colors */
.toggle-switch-us:checked {
  background-image: url("ubuntu-toggle-on-us.svg");
}
.toggle-switch-intl:checked {
  background-image: url("ubuntu-toggle-on-intl.svg");
}

the url part indicates.. the .svg file paths are relative to /usr/share/gnome-shell/theme/

so, when you have /usr/share/gnome-shell/theme/mytheme/mytheme.css and the image path is url("assets/1.jpg") simple copy the folder assets into /usr/share/gnome-shell/theme/

This means, lockscreen will consider url("assets/1.jpg") as /usr/share/gnome-shell/theme/mytheme/assets/1.jpg

and the GDM will consider url("assets/1.jpg") as /usr/share/gnome-shell/theme/assets/1.jpg

pratap@i7-4770:~$ sudo update-alternatives --config gdm3.css
[sudo] password for pratap: 
There are 2 choices for the alternative gdm3.css (providing /usr/share/gnome-shell/theme/gdm3.css).

  Selection    Path                                              Priority   Status
------------------------------------------------------------
* 0            /usr/share/gnome-shell/theme/MyTheme/MyTheme.css   100       auto mode
  1            /usr/share/gnome-shell/theme/MyTheme/MyTheme.css   100       manual mode
  2            /usr/share/gnome-shell/theme/ubuntu.css            10        manual mode

Press <enter> to keep the current choice[*], or type selection number: 
pratap@i7-4770:~$ 

GDM Screen

Lock Screen

---

Alternatively instead of copy pasting the assets folder you can make a symbolic link of /usr/share/gnome-shell/theme/mytheme/assets like below command.

sudo ln -s /usr/share/gnome-shell/theme/mytheme/assets /usr/share/gnome-shell/theme/

---

Alternatively, the best way would be first creating a symbolic link to mytheme directory like below command

sudo ln -s /usr/share/gnome-shell/theme/mytheme /usr/share/gnome-shell/

and then installing the update-alternatives like below command

sudo update-alternatives --install /usr/share/gnome-shell/theme/gdm3.css gdm3.css /usr/share/gnome-shell/mytheme/mytheme.css 100

Example:

pratap@i7-4770:~$ sudo update-alternatives --config gdm3.css 
[sudo] password for pratap: 
There are 3 choices for the alternative gdm3.css (providing /usr/share/gnome-shell/theme/gdm3.css).

  Selection    Path                                              Priority   Status
------------------------------------------------------------
* 0            /usr/share/gnome-shell/MyTheme/MyTheme.css         100       auto mode
  1            /usr/share/gnome-shell/MyTheme/MyTheme.css         100       manual mode
  2            /usr/share/gnome-shell/theme/MyTheme/MyTheme.css   100       manual mode
  3            /usr/share/gnome-shell/theme/ubuntu.css            10        manual mode

Press <enter> to keep the current choice[*], or type selection number: