# Perspective: Design help - add coloured rectangle behind graphic stretching width **URL:** \ **Category:** Ignition\ **Created:** [July 29, 2019, 10:21am UTC](https://forum.inductiveautomation.com/t/perspective-design-help-add-coloured-rectangle-behind-graphic-stretching-width/26951 "2019-07-29T10:21:11Z")\ **Posts on this page:** 12\ **Page:** 1
**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:** [July 29, 2019, 10:21am UTC](https://forum.inductiveautomation.com/t/perspective-design-help-add-coloured-rectangle-behind-graphic-stretching-width/26951/1 "2019-07-29T10:21:11Z")
I’m still fairly new to Perspective, and always seem to find myself scratching my head working out how to do the simplest of things… This is one of them. I would like to do something like below screenshots from inkscape. I’d like a group of objects on top with a graphic and a title which will always remain in the centre of the page, no stretching. Then behind it, I want a rectangle to stretch the entire width of the page, at any page width. I have no idea how to do this… I don’t know how to get the rectangle to sit behind the graphic/text _and_ also have it stretch without affecting the graphic/text. There’s not really a z-order in Perspective like in Vision and I’m struggling! ![image](https://us1.discourse-cdn.com/inductiveautomation/original/2X/a/aac47fa2e9e2f89dd0a7b2cf2885d3ba1395f983.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/2X/b/b16878fb304cffdbc8e4522997038d55fd779878.png) ---
**Author:** ![jonathan.taylor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jonathan.taylor/32/4048_2.png) [@jonathan.taylor](https://forum.inductiveautomation.com/u/jonathan.taylor)\ **Post date:** [July 29, 2019, 1:13pm UTC](https://forum.inductiveautomation.com/t/perspective-design-help-add-coloured-rectangle-behind-graphic-stretching-width/26951/2 "2019-07-29T13:13:15Z")
You should be able to use z-indexes to get your layering right. Then if you set the width of the rectangle to 100% it should do what you want it to do. ---
**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:** [July 29, 2019, 2:35pm UTC](https://forum.inductiveautomation.com/t/perspective-design-help-add-coloured-rectangle-behind-graphic-stretching-width/26951/3 "2019-07-29T14:35:54Z")
Containers in Containers in Containers. In a View built on a Coordinate Container set to use “fixed” mode, position the circles and titles. In a different View built on a Coordinate Container set to use “percent” mode, place your rectangle (using `1.0` for the width) Now place an Embedded View and supply the path of the View which has the titles/shapes, and position it where you need it. ---
**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:** [July 29, 2019, 3:28pm UTC](https://forum.inductiveautomation.com/t/perspective-design-help-add-coloured-rectangle-behind-graphic-stretching-width/26951/4 "2019-07-29T15:28:26Z")
An important thing that newer users to Perspective often don’t immediately grasp - there’s nothing conceptually “special” about containers the way there is about windows in Vision. That is - there’s not some large performance penalty for having additional views, _and_ you can arbitrarily nest containers _on the same view_ - if you look in the component palette, you’ll see the exact same container types that you get in the ‘Create New View’ dialog. These can be arbitrarily nested on the root container - just double click into them to ‘deep select’, and your editing experience will change to the requisite container type. So you could also do everything Cody suggests inside one single “Header” view, which is then what you put into an embedded view on other pages. ---
**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:** [July 29, 2019, 3:38pm UTC](https://forum.inductiveautomation.com/t/perspective-design-help-add-coloured-rectangle-behind-graphic-stretching-width/26951/5 "2019-07-29T15:38:40Z")
… In Containers. ---
**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:** [July 29, 2019, 5:10pm UTC](https://forum.inductiveautomation.com/t/perspective-design-help-add-coloured-rectangle-behind-graphic-stretching-width/26951/6 "2019-07-29T17:10:20Z")
This attachment is a quick pass at constructing your “header”. Some quick tweaks would allow for parameterization. [HeaderConstruction.zip](https://us1.discourse-cdn.com/inductiveautomation/original/2X/1/14dc574545d5664018a7a1342a13eb2dbb8a3ff0.zip) (11.6 KB) ---
**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:** [July 29, 2019, 9:42pm UTC](https://forum.inductiveautomation.com/t/perspective-design-help-add-coloured-rectangle-behind-graphic-stretching-width/26951/7 "2019-07-29T21:42:45Z")
Thanks for the replies, and @cmallonee thanks for the example project, makes sense! Note I increased the width of the Logo view so that it didn’t cut it off at phone-widths. Next question regarding your example: if I wanted the “Logo” view to always be say 30px from the left of the page and not move when resizing, how would I do that? I could change the root coordinate container to fixed mode and set the Logo view’s x-coordinate to 30px, but then the rectangle wouldn’t stretch. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/2X/7/7e704d127e21faf576af23833182d846618c2e6d.png) ---
**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:** [July 29, 2019, 9:45pm UTC](https://forum.inductiveautomation.com/t/perspective-design-help-add-coloured-rectangle-behind-graphic-stretching-width/26951/8 "2019-07-29T21:45:51Z")
Set The Embedded View to have an `x` position of `0.0`. In the “Titles” View, move everything to the right by `30px`. The “Logo” View should now have the “logo” starting at 30px from the left, and the rectangle has been untouched. [HeaderConstruction.zip](https://us1.discourse-cdn.com/inductiveautomation/original/2X/b/b2d88fa78b83f5540dea7d45279e9dea31a54027.zip) (11.7 KB) ---
**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:** [July 29, 2019, 9:50pm UTC](https://forum.inductiveautomation.com/t/perspective-design-help-add-coloured-rectangle-behind-graphic-stretching-width/26951/9 "2019-07-29T21:50:03Z")
Ok my bad, that was too easy. Last (dumb 😅) question: What about centring the ~~Logo~~ (EDIT: I meant Titles) view within the view, regardless of width? ---
**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:** [July 29, 2019, 9:59pm UTC](https://forum.inductiveautomation.com/t/perspective-design-help-add-coloured-rectangle-behind-graphic-stretching-width/26951/10 "2019-07-29T21:59:02Z")
… In containers. Place a FLEX container into your Logo View, and set the `x` value to be `0.0`, and `width` to be `1.0`. Set the height of the Flex Container to be the same as the “Titles” View. Place an Embedded View into the Flex Container. Set the path of the Embedded View to be that of the “Titles” View. Set `FlexContainer.props.direction` to be “column”. Set `FlexContainer.props.alignItems1 to “center”. Bam. [HeaderConstruction.zip](https://us1.discourse-cdn.com/inductiveautomation/original/2X/f/fcf5451952a3f204d6580078be7f625240cef20d.zip) (11.9 KB) ---
**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:** [July 29, 2019, 10:04pm UTC](https://forum.inductiveautomation.com/t/perspective-design-help-add-coloured-rectangle-behind-graphic-stretching-width/26951/11 "2019-07-29T22:04:44Z")
Ah, just the titles would mean you’d want them in their OWN View, which you then Embed. So… Containers. ---
**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:** [July 29, 2019, 10:09pm UTC](https://forum.inductiveautomation.com/t/perspective-design-help-add-coloured-rectangle-behind-graphic-stretching-width/26951/12 "2019-07-29T22:09:20Z")
And again, too easy! (when you know what you’re doing, haha) Thanks for your help. It all seems a bit foreign to me at the moment, but it was the same when I first started using Ignition a couple of years ago with Vision (this was a lot more natural though coming from experience in coordinate-based design; anchored layouts for Vision were my learning curve). I’m sure once you grasp the understanding, everything just sort of flows (or is contained 😉 )!