Add Full Size Login Background Image

Perfex CRM does not officially support login background image for admin area and customers area to keep the simplicity, but we created simple CSS snippet that will add perfectly aligned and full width background image in the admin area including fade over the image with pure CSS.

Admin area custom login background image

1. If you added custom color for admin login background in Setup->Theme Style->General, remove it and set blank to prevent inline styles overwrite the image background style.
2. Create custom.css file in assets/CSS
3. Chose an image you want to be added as background. (at least 1280 x 720px)
4. Upload image eq, in the media folder (or where you like the most). In our case will be in media and the url will be like this: http://yourdomain.com/crm/media/login_admin.png
5. Open the custom.css file and add the following code:

/* 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;
}

Here is our final result:

Customers area custom login background image

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

Keep in mind that for step 4 you will need to rename to image to eq. login_customers.png

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

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;
}

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