Give Redmine’s login screen a nice background

Redmine's login screen is a bit unpersonal, don't you think? There are many ways to customize it. Here we will learn how to give different backgrounds to the login/register pages.

Color background

Add the following code snippet at the end of the application.css file of your theme:

.action-login #wrapper, .action-register #wrapper, .action-lost_password #wrapper {
     background-color: #c3dbff !important;
}

Note: change “#c3dbff” by your desired color code

Gradient background

.action-login #wrapper, .action-register #wrapper, .action-lost_password #wrapper {
    background: -webkit-linear-gradient(to left, #ff0099, #493240)!important; /* Chrome 10-25, Safari 5.1-6 /
    background: linear-gradient(to left, #ff0099, #493240)!important; / W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

Note: change the gradient color codes by your desired codes. You can find very beautiful gradients in pages like

• https://uigradients.com/ or
• https://cssgradient.io/

Local image background

.action-login #wrapper, .action-register #wrapper, .action-lost_password #wrapper {
     background-image: url("yourbackgroundimage.jpg") no-repeat;
}

Note: you will need to put the image in your theme's folder. Please mind the path to the image.

External image background

.action-login #wrapper, .action-register #wrapper, .action-lost_password #wrapper {
     background-image: url("https://yourimageurl.com/imagename.jpg") no-repeat;
}

Note: you will need to change the image URL to your desired image path.

You may also include all these tweaks by using the View customize plugin, like in this snippet (copy/paste from the above code snippets):