Dynamic Backgrounds

Dynamic Backgrounds for Microsoft Power Apps
Moving Colors 1
Moving Colors 2
Moving Colors 3
Moving Colors 4
Moving Colors 5
Moving Colors 6
Moving Colors 7
Moving Pattern 1

Image Code

Copy the content and paste it into the image property of the image element in your Power App.

Comments

E
Eiko 1 week ago

この背景色ツールは素晴らしい。これを使えば、私のような素人でも簡単に見栄えの良い背景を作ることができた!

Add a comment

We encourage open and constructive discussions here. Please be respectful of others' opinions and avoid using abusive or offensive language. Let’s create a positive and inclusive environment for everyone. Thank you!

What is a Dynamic Background?

Dynamic backgrounds are designed to enhance the user interface (UI) of your Power Apps. The unique feature of these dynamic backgrounds is their ability to change colors, shapes, or movements dynamically. This can be particularly useful when creating an impressive app UI. Whether it's for a text or header background, or for the full background of the app, dynamic backgrounds can significantly enhance the user's experience.

How to use?

A Dynamic Background can be used in two different ways depending on the purpose of your use.

  • When used as a full background
    • Download the SVG image from the dropdown menu. If your Power App is designed for phones, download the image for phones; otherwise, download the tablet version.
    • Open your Power App, select the media tab on the left, and upload the downloaded SVG image.
    • Adjust the size of the SVG image to fill up the whole screen. Add your components on top of it as usual.
  • When using in any other backgrounds (Custom size)
    • Open the dropdown menu for your desired dynamic background and select "Image Code" to obtain the SVG code.
    • Click on "Copy to Clipboard" to copy the entire code to the clipboard.
    • Open your Power App and add an "Image" component in to your app screen.
    • In the "Image" property of the image component, simply paste the copied content.
    • Adjust the width and height of the image.

Please refer to the tutorial video for more information.