Add Full Size Login Background Image

SudoWorkspace doesn’t officially support login background images for the admin and customer areas to preserve simplicity. However, we’ve created a compact CSS snippet that adds a perfectly aligned, full‑width background image — with a subtle fade overlay — to the login screens using only pure CSS.

Admin area custom login background image

• If you’ve set a custom color for the admin login background in Setup -> Theme Style -> General, clear that field (leave it blank) to prevent inline styles from overriding the background image.
• Create a custom.css file inside assets/css .

custom.css

assets/css

• Select a background image of at least 1280 × 720 pixels.
• Upload the image to your media folder (or another preferred location). For example, if it’s placed in the media folder the URL might be: http://yourdomain.com/crm/media/login_admin.png
• Open the custom.css file and add the following CSS:

custom.css

/ Remove this if you dont want background overlay over the image or adjust per your needs /
body.login_admin:before {
    content: " ";
    background: rgba(31, 31, 31, 0.7);
    min-height: 100%;
    min-width: 100%;
    position: absolute;
}
body.login_admin {
  background: url('https://yourdomain.com/crm/media/login_customers.png') no-repeat center center fixed; / The full image url/
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/ Remove this if you dont want background overlay over the image or adjust per your needs /
body.login_admin:before {
    content: " ";
    background: rgba(31, 31, 31, 0.7);
    min-height: 100%;
    min-width: 100%;
    position: absolute;
}
body.login_admin {
  background: url('http://yourdomain.com/crm/media/login_customers.png') no-repeat center center fixed; / The full image url/
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/ Remove this if you dont want background overlay over the image or adjust per your needs /
body.login_admin:before {
    content: " ";
    background: rgba(31, 31, 31, 0.7);
    min-height: 100%;
    min-width: 100%;
    position: absolute;
}
body.login_admin {
  background: url('http://yourdomain.com/crm/media/login_customers.png') no-repeat center center fixed; / The full image url/
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Final result

#### Customers area custom login background image

Follow the steps from the admin area custom login background image from 1 to 4.

Note: For step 4, rename the image to, for example, login_customers.png .

login_customers.png

5. Open the custom.css file and add the following code:

custom.css

body.customers_login {
  background: url('https://yourdomain.com/crm/media/login_customers.png') no-repeat center center fixed; / The full image url/
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body.customers_login {
  background: url('http://yourdomain.com/crm/media/login_customers.png') no-repeat center center fixed; / The full image url/
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body.customers_login {
  background: url('http://yourdomain.com/crm/media/login_customers.png') no-repeat center center fixed; / The full image url/
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Don’t forget to replace the URL with your image URL