# Flex container Background Image Issue **URL:** \ **Category:** Ignition\ **Tags:** ignition81, perspective\ **Created:** [March 22, 2024, 3:22pm UTC](https://forum.inductiveautomation.com/t/flex-container-background-image-issue/87751 "2024-03-22T15:22:19Z")\ **Posts on this page:** 6\ **Page:** 1
**Author:** ![Ryan\_Craig](https://avatars.discourse-cdn.com/v4/letter/r/45deac/32.png) [@Ryan\_Craig](https://forum.inductiveautomation.com/u/Ryan_Craig)\ **Post date:** [March 22, 2024, 3:22pm UTC](https://forum.inductiveautomation.com/t/flex-container-background-image-issue/87751/1 "2024-03-22T15:22:20Z")
I am currently trying to set a background image from the HMI screen I created. My screen is created all within a Flex container so that it will be adjusted depending on the size of the HMI, but I can't seem to get a background image to work without the flex container wanting to push the image to a side. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/e/3ee310e5bd2f28d7c0040170db0082cb782c3271.png) I was able to get it to work when using a coordinate container but then it ruins the flex part of my project. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/0/a01029cf701b31e397d80f750bb8350625acdf1b.jpeg) Any ideas on how I can get a background to work with a flex container, or maybe a different work around? ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [March 22, 2024, 4:42pm UTC](https://forum.inductiveautomation.com/t/flex-container-background-image-issue/87751/2 "2024-03-22T16:42:41Z")
Can you show how and where you've referenced the image? Comments on the view: - There are at least five different font sizes. Why? Be consistent. - Never use underline - unless to demonstrate an amateur design. Use bottom border across the width of the container if required. (It's not the same as underline which cuts through character descenders whereas the border doesn't.) - The variable information (the important bit) is in low contrast grey on a a pale blue background. Why? That's more important than the labels which are block capitals (why) and bold. The padding seems to have been overridden on some the labels (probably by specifying a height) so they all appear crushed inside their containers. - In general, left-align text and right-align numbers, both in your report header and in the table itself. The decimal points don't line up in the results column. (If you right-align a column's data then you should right-align the column header as well.) - Think how the user or the occasional reader has to scan the header - left to right, up and down. For example: ![Nifty report header](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/8/18d302602ddee4d3677dd0e2c10ca998311ff402.png) There's only one font size but the information is clear and easily scanned. It only uses flex containers and label components and all the styles are set by style class definitions using the [Perspective Built-In Themes | Ignition User Manual](https://docs.inductiveautomation.com/docs/8.1/ignition-modules/perspective/styles/perspective-built-in-themes#built-in-theme-colors) so they're consistent and easy to modify across the whole application. Similarly the green and red start and stop buttons are confusing. Does green indicate that Start is a good thing to press and red indicate that Stop is a bad thing? Why do both appear to be enabled at the same time? If there are only two possible states for the machine then one of the buttons (the current machine state) should be disabled. Suggestion: ![Start and stop buttons](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/1/b100761422ec42a1d6c0e66f2126db5729583cb2.png) Design elegant applications! ---
**Author:** ![Ryan\_Craig](https://avatars.discourse-cdn.com/v4/letter/r/45deac/32.png) [@Ryan\_Craig](https://forum.inductiveautomation.com/u/Ryan_Craig)\ **Post date:** [March 25, 2024, 2:14pm UTC](https://forum.inductiveautomation.com/t/flex-container-background-image-issue/87751/3 "2024-03-25T14:14:05Z")
I appreciate the feed back and will definitely apply some of these to my project, but the project is far from finished and what you see is me trying to fix the functionality of the page before moving forward with formatting. I purposely left thing huge and obnoxious so I wouldn't forget to address them. That being said, would you know any sort of answer for my original question: Any ideas on how I can get a background to work with a flex container, or maybe a different work around? Thanks! ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [March 25, 2024, 2:25pm UTC](https://forum.inductiveautomation.com/t/flex-container-background-image-issue/87751/4 "2024-03-25T14:25:31Z")
> [@Transistor](#): > > Can you show how and where you've referenced the image? ... ---
**Author:** ![Felipe\_CRM](https://avatars.discourse-cdn.com/v4/letter/f/dfb087/32.png) [@Felipe\_CRM](https://forum.inductiveautomation.com/u/Felipe_CRM)\ **Post date:** [March 26, 2024, 1:30pm UTC](https://forum.inductiveautomation.com/t/flex-container-background-image-issue/87751/5 "2024-03-26T13:30:50Z")
I strongly disagree with the design choice, but here's how to do it: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/5/a5e1ecedfa138360a0da247dc83b2e45aab1b1c0.png) You have to set the following styles on your main flex container: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/e/9e883a47a699cfa19a95267490cc83f0628f44a6.png) ```auto { "classes": "", "backgroundColor": "#FFFFFF", "backgroundRepeat": "no-repeat", "overflow": "auto", "backgroundImage": "url(\"/system/images/foo.png\")", "backgroundPosition": "bottom", "backgroundSize": "cover" } ``` Play around with the Position and Size properties as needed. Additionally, any components you want the background to be visible through need the style property ```auto backgroundColor: transparent ``` By the way, from your first picture it seems that you were just trying to drag and drop the image into the flex container, which adds it as a child. That's why it was getting pushed around by the other components. ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [March 26, 2024, 1:35pm UTC](https://forum.inductiveautomation.com/t/flex-container-background-image-issue/87751/6 "2024-03-26T13:35:45Z")
> [@Felipe\_CRM](#): > > I strongly disagree with the design choice, Agreed. (To the OP:) Ask yourself, "How does the background image help in presentation of the data? Does it help legibility? Does it help in guiding the reader through the data in some useful way?"