Set a Background in a Microapp

Tiled allows you to use uploaded image and video assets to design a graphical background for any of the pages or overlays of your microapp. Backgrounds fill the entire page, and serve as its base layer. Once the background is placed, you can layer additional graphics, text, and other tiles on top to create a richer viewing experience.

Adding a Background

From the Microapp Builder, navigate to the desired page or overlay. Ensure that you have uploaded the desired graphic or video as an asset for your microapp. For more information, see Adding Assets to your Microapp.

There are two methods for adding an asset as your background.

  1. Drag the asset from the Assets panel to the Background panel.
    Background_on_menu.jpg
  2. Drag the asset from the Assets section to the page. The page then turns blue and displays the message 'Set as background'.

Set_as_Background_main.jpg

Placing an image background

When you place an image asset as your background, Tiled automatically adjusts the image so that it best fits the size of your microapp page. However, if your image asset is smaller than your microapp page, you can only place it by dragging it from the Assets panel to the Background panel.

Using Video for the Background

video_background.png

To add a video background to your page, upload your video to your assets library, then drag it into the "background" box in the right sidebar. It will be set to autoplay in mute. 

Large autoplay videos can slow down your microapp. For optimum viewing, be sure to compress your videos before uploading them.

Note

Certain platforms (such as Linkedin's iOS app) do not support autoplay for videos. Autoplay will be disabled when microapps are shared on these platforms to prevent glitching.

Deleting a background

To delete the current background, hover the cursor over the image in the Background section of the Builder Toolbar, and click the trashcan icon.  The image is removed as the background but is still available as an Asset.

Delete_background.jpg

Comments

0 comments

Please sign in to leave a comment.