cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Gramos01
Helper III
Helper III

SVG Image in a container

I have 2 labels and 1 image with SVG, the idea is to put the image as a background however the container doesn't have an option to do this? I tried to remove image and make some aesthetical adjustment to the container but the options are limited.

 

Is there any other way for me achieve my goal? I am using container now so my app is responsive.

 

Thanks,

Gino

1 ACCEPTED SOLUTION

Accepted Solutions

The only difference would be that you position things inside the regular container using relative coordinates.  The vertical container will stack them vertically. But that's why you can't get the image to take up the entire background.  You can use a regular container and still make it responsive.  

 

But you might want to try something different first.  Add a regular container and put the image control and the vertical container inside that.  Make sure both are set to take up the whole width and height of the container.  Now put the remaining controls inside the vertical container.  That should let you still see the image behind the vertical container, but use the vertical container for positioning your labels.



-------------------------------------------------------------------------
If I have answered your question, please mark your post as Solved.
If you like my response, please give it a Thumbs Up.

View solution in original post

5 REPLIES 5
Pstork1
Dual Super User
Dual Super User

Add an image control to the container and set its width and height equal to parent.width and parent.height. Also set x,y equal to 0,0 Then make sure its the last item inside the container and it will serve as a background for any other control in the container. The labels can then be positioned as needed in front of the image control.



-------------------------------------------------------------------------
If I have answered your question, please mark your post as Solved.
If you like my response, please give it a Thumbs Up.

Hello @Pstork1 

 

Thanks for the help so far. I have tried this but it just goes right next to other controls.. it's not making it as background...

Are you using a regular container or a Vertical or Horizontal container? It needs to be a regular container.  Otherwise it will try to arrange the items inside the container. That's probably why they are stacked side by side.  Here's an example with a regular container.

image.png



-------------------------------------------------------------------------
If I have answered your question, please mark your post as Solved.
If you like my response, please give it a Thumbs Up.

Hello   I was using vertical. Would the regular container still makes it responsive? Ill try this out thanks!!

The only difference would be that you position things inside the regular container using relative coordinates.  The vertical container will stack them vertically. But that's why you can't get the image to take up the entire background.  You can use a regular container and still make it responsive.  

 

But you might want to try something different first.  Add a regular container and put the image control and the vertical container inside that.  Make sure both are set to take up the whole width and height of the container.  Now put the remaining controls inside the vertical container.  That should let you still see the image behind the vertical container, but use the vertical container for positioning your labels.



-------------------------------------------------------------------------
If I have answered your question, please mark your post as Solved.
If you like my response, please give it a Thumbs Up.

Helpful resources

Announcements
Power Platform Conf 2022 768x460.jpg

Join us for Microsoft Power Platform Conference

The first Microsoft-sponsored Power Platform Conference is coming in September. 100+ speakers, 150+ sessions, and what's new and next for Power Platform.

Power Platform Call June 2022 768x460.png

Power Platform Community Call

Join us for the next call on June 15, 2022 at 8am PDT.

PA Virtual Workshop Carousel 768x460.png

Register for a Free Workshop

This training provides practical hands-on experience in creating Power Apps solutions in a full-day of instructor-led App creation workshop.

PA.JPG

New Release Planning Portal (Preview)

Check out our new release planning portal, an interactive way to plan and prepare for upcoming features in Power Platform.

Top Solution Authors
Top Kudoed Authors
Users online (2,726)