Skip to main content

 –

Adding a new background image to your login screen

Suggest edit Updated on December 1, 2021
Applicable to Theme Cosmos applications

Personalize the appearance of your login screen by integrating a custom background image into your login screen CSS.

    Uploading the image to the Rule-File-Binary records in your unauthenticated ruleset

  1. In the header of Dev Studio, click CreateTechnicalBinary File.
  2. Complete the configuration form of the binary file record by providing the following information:
    1. In the Label field, enter a unique label for the image.
    2. In the App Name (Directory) field, enter webwb.
    3. n the File Type (extension) field, enter the extension (for example, PNG, JPEG) for the file that you want to upload to the binary file. Do not include a period.
  3. In the Context section, select the application that contains your unauthenticated ruleset.
  4. In the Add to ruleset list, select the unauthenticated ruleset that you created.
  5. Click Create and open.
  6. Open the file browser by clicking Upload file.
  7. Click Save.Result: In the Image details section, you can see the file that you uploaded as well as the file dimensions.
  8. Note the dimensions of the image for future use in the CSS file.
  9. Replacing the existing values in the CSS of the login screen

  10. In the navigation pane of Dev Studio, click Records.
  11. Expand the Technical category, and then click Text File.
  12. In the File Name column, click the Filter icon to find the text rule that contains the CSS of the login screen that you want to customize with the image as a background.
  13. Display the text file rule form by clicking the result.
  14. In the background-image element, replace the existing values with the image name and extension in the following format: url(image_name.extension);.
  15. Below the background-image element, enter a background-size element with the dimensions of the image for width and height in pixels (px). For example: background-size: widthpx heightpx;
  16. Save the changes by clicking Check-in.
  17. Optional: To verify that the image appears correctly in the background of the login screen, in the Actions list, select Preview.
Did you find this content helpful? YesNo

Have a question? Get answers now.

Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.

Ready to crush complexity?

Experience the benefits of Pega Community when you log in.

We'd prefer it if you saw us at our best.

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us