NC25 display background image only on loginscreen

ℹ️ Support
,
1

I’d like to display the background image of my Nextcloud instance only on the login screen, just like it was the case until version 24.
I think this can be achieved with the custom CSS app, but unfortunately I don’t have any knowledge of CSS so what code should I use to achieve this behaviour?

kr

wouter

2

Isn’t that what is already supported here without having to touch css:

https://docs.nextcloud.com/server/latest/admin_manual/configuration_server/theming.html

3

Users can change the background image or the background color individually under Settings → Appearance and accessibility → Background.

Bildschirmfoto vom 2023-05-04 07-41-03
Bildschirmfoto vom 2023-05-04 07-41-03912×799 428 KB

So you don’t have to change anything in the code, just select “no background” and there won’t be a background image displayed in your account anymore.

4

Thanks for your replies, but this isn’t exactly what I was looking for. If I choose 'no background ’ for my user, I do see the background image on the login screen, but not on the dashboard.

So I want the following default behaviour for my instance

Background image on
-Log screen
-Dashboard

NO background image when navigating through other apps like files etc (just like it was the case until NC 24)

Thx

5

Since NC25, that’s not possible anymore. Maybe there are hacky ways to achieve this, but there is no setting or config option as far as I know.

6

Ok thx, that’s what I was thinking also.
So basically I have 2 options:
-choosing another background image (my current one doesn’t fit too well to view the app buttons)
-find some CSS code which executes my desired behaviour

Thx

7

OK I’ve hacked myself a way in. Here is how I’ve done it:

  • In the theming section of the settings remove the background
  • Copy you background to the following location in the webroot of your NC instance:
    /apps/theming/img/background/your_wallpaper.jpg
  • In the custom CSS section of theming app, use the following code:
#body-login {
  background-image: url('/apps/theming/img/background/your_wallpaper.jpg') !important;
  background-image-default: url('/apps/theming/img/background/your_wallpaper.jpg') !important;
background-size: cover;
background-position: left center;
}

.app-dashboard {
  background-image: url('/apps/theming/img/background/your_wallpaper.jpg') !important;
background-size: cover;
background-position: left center;
}

This will show your background on the login page (including password reset etc) & the dashboard panel. The top bar will have a solid color just as was the case until NC 24.

If you want to bring back more elements from the older version layout, you could use this custom CSS as well: Nextcloud 25 – “everything so round” | Arno Welzel

edit: added background-size: cover; to scale the background image better for smaller screens

1 Like