# What is best way to use picture as background in Perspective project? **URL:** \ **Category:** Ignition Early Access\ **Created:** [December 6, 2019, 9:25pm UTC](https://forum.inductiveautomation.com/t/what-is-best-way-to-use-picture-as-background-in-perspective-project/30507 "2019-12-06T21:25:57Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![wking](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/wking/32/21823_2.png) [@wking](https://forum.inductiveautomation.com/u/wking)\ **Post date:** [December 6, 2019, 9:25pm UTC](https://forum.inductiveautomation.com/t/what-is-best-way-to-use-picture-as-background-in-perspective-project/30507/1 "2019-12-06T21:25:57Z")
I am to start building a project using an exported CAD drawing of our shop as the background. What is best image file type to use? .jpg .pmg does it matter? What is the best container to use or framework? Coordinate Container? It’ll be buttons on top of the image to bring up popups that will display data about that machine. So making sure the buttons stay in place relative to the picture is important? How are others doing these kinds of projects? ---
**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\ **Post date:** [December 6, 2019, 10:09pm UTC](https://forum.inductiveautomation.com/t/what-is-best-way-to-use-picture-as-background-in-perspective-project/30507/2 "2019-12-06T22:09:10Z")
From the sounds of it, you should use a Coordinate Container with `root.props.mode` set to “percent”. This could get a little complicated with your View sizing to different workstation viewport dimensions, so I would recommend that you take this View and embed it in some other Flex-y View so that you control how much the Image/View stretches if at all. This would also keep the buttons in relative position to the background. .jpg or .png shouldn’t matter, but obviously file size could cause problems depending on the user’s bandwidth/connection, so it’s up to you to balance definition vs size. ---
**Author:** ![wking](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/wking/32/21823_2.png) [@wking](https://forum.inductiveautomation.com/u/wking)\ **Post date:** [December 6, 2019, 10:26pm UTC](https://forum.inductiveautomation.com/t/what-is-best-way-to-use-picture-as-background-in-perspective-project/30507/3 "2019-12-06T22:26:45Z")
Thanks. Is there away to set a containers background to an image. Or you have to use an image component? ---
**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\ **Post date:** [December 6, 2019, 10:40pm UTC](https://forum.inductiveautomation.com/t/what-is-best-way-to-use-picture-as-background-in-perspective-project/30507/4 "2019-12-06T22:40:51Z")
Yes, through style properties (aka, CSS): ![image](https://us1.discourse-cdn.com/inductiveautomation/original/2X/b/bed95e14727616a1c75977d81615b2f620df7904.png) If your image is already uploaded to Image Management, then just supply the path with `url("/system/images/path/to/image.png")`. Use `backgroundSize: cover` to make it take up the full size of the container. ---
**Author:** ![wking](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/wking/32/21823_2.png) [@wking](https://forum.inductiveautomation.com/u/wking)\ **Post date:** [December 6, 2019, 10:52pm UTC](https://forum.inductiveautomation.com/t/what-is-best-way-to-use-picture-as-background-in-perspective-project/30507/5 "2019-12-06T22:52:47Z")
> [@paul-griffith](#): > > Yes, through style properties (aka, CSS): Thanks man. I swear that wasn't there earlier. Lol ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [December 7, 2019, 1:05am UTC](https://forum.inductiveautomation.com/t/what-is-best-way-to-use-picture-as-background-in-perspective-project/30507/6 "2019-12-07T01:05:30Z")
> [@wking](#): > > What is best image file type to use? .jpg .png does it matter? Generally I would always use PNGs for line drawings and images designed by vector programs, if you need to use a raster format. PNGs use a lossless compression, so you don't see artifacting that you would using a jpeg. You don't see PNGs used for photos however as their file sizes are much larger for images with high graphical complexity, and artifacting isn't really an issue for photos due to their nature. JPG/JPEG on the other hand uses a lossy compression and while it's great for photos, it produces noticeable artifacts for vector-based work. See comparison: ![Comparison_of_JPEG_and_PNG](https://us1.discourse-cdn.com/inductiveautomation/original/2X/e/e9c3c6c3301de850e530aea5521951ee119f37f4.png) ---
**Author:** ![Marco\_Keller](https://avatars.discourse-cdn.com/v4/letter/m/b19c9b/32.png) [@Marco\_Keller](https://forum.inductiveautomation.com/u/Marco_Keller)\ **Post date:** [April 14, 2023, 9:56am UTC](https://forum.inductiveautomation.com/t/what-is-best-way-to-use-picture-as-background-in-perspective-project/30507/7 "2023-04-14T09:56:35Z")
Could you add this parameter to the documentation? I can not find it here: [Style Reference - Ignition User Manual 8.1 - Ignition Documentation](https://docs.inductiveautomation.com/display/DOC81/Style+Reference) ---
**Author:** ![Simon\_Hathout\_Willar](https://avatars.discourse-cdn.com/v4/letter/s/3da27b/32.png) [@Simon\_Hathout\_Willar](https://forum.inductiveautomation.com/u/Simon_Hathout_Willar)\ **Post date:** [March 21, 2025, 10:42pm UTC](https://forum.inductiveautomation.com/t/what-is-best-way-to-use-picture-as-background-in-perspective-project/30507/8 "2025-03-21T22:42:21Z")
> [@paul-griffith](#): > > Use `backgroundSize: cover` I tried this method, but it attempts to preserve aspect ratio. Although this helps to avoid the image becoming stretched and ugly, it also means that the location changing behaviour of labels on a percent coordinate container does not align with the background. To get the same as an image component sized to the whole container, ignoring aspect ratio, using `backgroundSize: 100% 100%` works.