Adding a new background image to your login screen
You can integrate a custom background image into your Pega application login screen HTML through a binary file.
- In the navigation header of Dev Studio, select. Pega Platform displays the Binary File Record Configuration form.
- 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.
- In the Context section, select the application that contains your unauthenticated ruleset.
- In the Add to ruleset list, select the unauthenticated ruleset that you created.
- Click Create and open to display the Binary File rule form.
- Click Upload file to open the file browser.
- Click Save. In the Image details section, Pega Platform displays the file that you uploaded and its dimensions.
- Note the dimensions of the image for future use in the CSS file.
- In the navigation pane of Dev Studio, select.
- In the File Name column, click the Search icon.
- In the search text field, enter the Text rule that contains the CSS of the login screen you want to customize with the image as a background.
- Click Apply.
- Click the resulting row.
- Press CTRL + F and enter the following text:
body {
- In the background-image element, replace the existing
values with the image name and extension in the following format:
url(image_name.extension);
- Below the background-image element, enter a background-size element with the dimensions of the image for width and height in pixels (px).
- Click Check-in to add changes to the unauthenticated ruleset that you created.
- Confirm that the background image appears correctly on your background for the selected login screen.
Previous topic Editing the text rules containing the source CSS for login screens Next topic Styling controls at run time