Skip to main content


         This documentation site is for previous versions. Visit our new documentation site for current releases.      
 

Adding a new background image to your login screen

Updated on December 13, 2022
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.

Have a question? Get answers now.

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

Did you find this content helpful?

Want to help us improve this content?

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