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
- 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.
Result: In the Image details section, you can see the file that you uploaded as well as the file dimensions.
- 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).
For example: background-size: widthpx heightpx;
- 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