LinkedIn
Copied!

Table of Contents

Adding a new background image to your login screen

Version:

Only available versions of this content are shown in the dropdown

You can integrate a custom background image into your Pega application login screen HTML through a binary file.

If you have not yet done so, create an authentication service. Your application requires an authentication service for users to securely log in. For more information, see Creating an authentication service.

After creating an authentication service, you must configure your browser requestor. For more information, see unauthenticated ruleset.

  1. In the navigation header of Dev Studio, select Create Technical Binary File . Pega Platform displays the Binary File Record Configuration form.

  2. Complete the configuration form:

    • In the Label field, enter a unique label for the image.
    • In the App Name (Directory) field, enter webwb.
    • In the File Type (extension) field, enter the Windows extension (for example, png, jpeg) for the file 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 to display the Binary File rule form.

  6. Click Upload file to open the file browser.

  7. Click Save. In the Image details section, Pega Platform displays the file that you uploaded and its dimensions.

  8. Note the dimensions of the image for future use in the CSS file.

  9. In the navigation pane of Dev Studio, select Records Technical Text File .

  10. In the File Name column, click the Search icon.

  11. In the search text field, enter the Editing the text rules that contain the source CSS for login screens that contains the CSS of the login screen you want to customize with the image as a background.

  12. Click Apply.

  13. Click the resulting row.

  14. Press CTRL + F and enter the following text:

    body {

  15. In the background-image element, replace the existing values with the image name and extension in the following format:

    url(image_name.extension);

  16. Below the background-image element, enter a background-size element with the dimensions of the image for width and height in pixels (px).

    background-size: widthpx heightpx;
  17. Click Check-in to add changes to the unauthenticated ruleset that you created.

  18. Confirm that the background image appears correctly on your background for the selected login screen.

If you want to edit the source CSS of your login screens, see Editing the text rules that contain the source CSS for login screens.

If you want to edit the source HTML of your login screens, see Editing the source HTML of your login screen.

  • unauthenticated ruleset

    After you create an authentication service, you must associate a Browser requestor and Pega application with an unauthenticated Access Group and ruleset to synchronize customizations of your login screens with your application.

  • Editing the source HTML of your login screen

    Your Pega application uses several rules that form the source markup HTML and CSS of your login screens. To customize these login screens, you can add your own HTML structure, CSS elements, or background images to the source fields in each of their respective HTML and Text rules.

  • Customizing login screens for your Pega application

    Your Pega application uses several rules that correspond to each screen accessed by unauthenticated operators (users who have not logged in). Pega Express allows you to customize these screensincluding the login screen, authentication screen, logout screen, and other screensthrough their source HTML and custom cascading style sheets (CSS).

Have a question? Get answers now.

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