Background Image

The background-image property in CSS is used to apply an image as the background of an HTML element. Similarly, in Workmaster, the Background Image property serves the same function, allowing users to enhance the visual presentation of elements by setting custom background images.

Applying a Background Image in Workmaster

The following steps visually demonstrate how to upload and apply a background image to an element using the Background Image property in Workmaster.

1. Access the Background Image Upload Option

Click the plus (+) icon next to the "Please Select" field under the Background Image section. This action will open the image upload dialog, allowing you to add a new image.

2. Open the Upload Dialog

In the Upload dialog that appears, click the upload icon to begin selecting an image from your device.

3. Select an Image from Your Computer

A file explorer window will open. Navigate to the location of your desired image, select it (e.g., mountain.jpg), and click Open.

4. Image Uploaded Successfully

Once uploaded, the image will appear in the upload dialog. From here, you can confirm that the image has been added and is available for selection.

5. Background Image Applied to the Element

After selection, the image is now shown in the Background Image preview. It is also associated with the element in your project.

6. Final Result: Background Image Rendered

The selected image is successfully applied as the background of the element. The content (e.g., login form) is rendered over the background image, enhancing the visual presentation.