How to use Dynamic Backgrounds

This article demonstrates how to download and use a dynamic background for Microsoft Power Apss (Canvas App) from PowerAppGallery.

A dynamic background is usually an animated SVG vector graphic that continuously changes its color or texture in an infinite loop. It is designed for use as a background in Microsoft Power Apps. Integrating this feature will enhance the design of your Power App and give it a visually captivating look.

With the newly added feature, dynamic backgrounds can now be utilized in various ways, such as for button or card backgrounds. It can be imported into Power Apps using two main methods:

1. Download SVG Image

Use this method to create a fully covered dynamic background in Power Apps. Download one of the following:

  • For phone mode, click on 'download for phone' (640 x 1136)
  • For tablet mode, click on 'download for tablet' (1366, 768)

a. Download the Background Image

The first step to add a dynamic background is to download the appropriate size SVG. Each dynamic background has small icons in the corner indicating phone and tablet sizes as shown below.

dynamic backgrounds for power apps

Click on the icon for the desired size (for phone or tablet) you want to download.

b. Upload the Image in Power Apps

Next, import the downloaded image into your Power Apps. Navigate to the media section in your Power App and choose 'Upload' from the 'Add Media' dropdown.

import media in power apps

c. Add Background to Power App Screen

Once the background image is uploaded, go to the desired screen and drag the image to set it as the background. Then, adjust the size of the image to fit the screen.

Add background image in power apps

2. Copy code

Use this method for any other purpose. With this approach, the image will not have a fixed height and width but will change its size according to the elements' width and height.

a. Add an Image to your Power App screen.

Navigate to the desired screen and insert an 'Image' element to the screen as shown in the image below.

Add an Image element to power app screen

b. Copy the code

From PowerAppGallery, click on the 'copy code' button to copy the code to the clipboard.

copy code for power app image element

c. Paste the code in Power Apps

Return to your Power App screen. Select the Image and paste the copied code in the 'Image' property.

paste code in power app image element

d. Adjust the size

Adjust the width and height of the image as required.

Add an Image element to power app screen

Don't forget to continue exploring powerappgallery.com for incredible tips, tricks, and tools designed to enhance your experience with Power Apps.