Flex container Background Image Issue

Ignition
,
5

I strongly disagree with the design choice, but here's how to do it:

image
You have to set the following styles on your main flex container:
image

{
  "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

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.