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
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 Create Technical Binary 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.

    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 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).

    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.

Related Content

Have a question? Get answers now.

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