Canvas Apps Controls UI

Background images for Power Apps screens – the right way!

Background images in Power Apps
Background images in Power Apps

Introduction

Power Apps are just apps that you use to fill out forms. I hear this a lot from people who are just getting started with Power Apps. Or from people who don't trust or cannot believe what this platform can do! That cannot be further from the truth! It is like any other application development platform - the more attention you pay to designing an app, the better your finished product will be! One way to spruce up Power Apps screens is to add background images.

Tip - Best way to add a background image

You can add an image to a screen in several different ways. One way is to upload an image to the app, go to the Media tab, and then click on the image to add it to a screen. While this is a perfect way of adding images, it may not be the best if you are trying to add a background image. Now you may ask why? Here are some reasons:

  1. An image added directly to a screen needs to be resized and repositioned so as to cover the entire screen
  2. Since its like any other control on a screen, it is easy to drag it or resize it by mistake
  3. It also needs to be layered behind all the other controls

The better way to add a background image to a screen is to use the BackgroundImage property of a screen. This method ensures:

  1. You cannot resize or reposition the image accidentally
  2. You do not need to set its X, Y, Width, and Height properties
  3. The image is behind all the controls on the screen

Here's how a background image looks on a Power Apps screen:

Background image in Power Apps
Background image in Power Apps

To learn more about the screen control and its other properties, click here.

Stay tuned for the remaining 24 tips!

Recent articles

  1. A-Z: 26 tips! Learn how to improve your Power Apps!
  2. Add Picture vs Camera Control – Who is the winner?
  3. Power Apps galleries – how to auto scroll!