Adding a new background image to your login screen
Personalize the appearance of your login screen by integrating a custom background image into your login screen CSS.
- In the header of Dev Studio, click .
- Complete the configuration form of the binary file record by providing the
following information:
- In the Label field, enter a unique label for the image.
- In the App Name (Directory) field, enter webwb.
- 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.
- 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.
- Open the file browser by clicking Upload file.
- Click Save.
- Note the dimensions of the image for future use in the CSS file.
- In the navigation pane of Dev Studio, click Records.
- Expand the Technical category, and then click Text File.
- 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.
- Display the text file rule form by clicking the result.
- 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).
- Save the changes by clicking Check-in.
- Optional: To verify that the image appears correctly in the background of the login screen, in the Actions list, select Preview.
Uploading the image to the Rule-File-Binary records in your unauthenticated ruleset
Replacing the existing values in the CSS of the login screen
Previous topic Editing the text rules that contain the source CSS for login screens Next topic Debugging your UI