Can a Button have an Background image instead of Color?

Is it possible to have a Button with an dynamic Background image?
The image should be inserted with dataVariable.

Hi!

You can put the button into a container and set a background image for the container. Just set the button margins as 0 and style the width, height, and borders of the container like the button so there is no visual difference between the two. Also, make sure that the background-color opacity of the button is 0. An alternative is to use only a container as the button and make use of the Component tap event. Hope this helps!

Just make a composite view component out of a container and text to create a custom button

1 Like

In general, this, John!

I will stress, though, that setting a radius to the container button with a background image doesn’t seem to render properly in the web preview. For example, I was using a PNG gradient to add 3D depth and detail to my buttons and it would show the curved edges properly in Composer, but not in the Preview. To be specific, the edge-curving doesn’t seem to affect the image itself, just the container.

Using a random image as a container background, here’s what it looked like with “50” to the edge radius in Composer:
Screenshot 2020-11-23 192750

And here’s what it looks like in the Preview:
Screenshot 2020-11-23 192826

Perhaps, @Harri_Sarsa or someone could confirm this is just a preview glitch and won’t affect the final build? (I’m currently unable to build my web app to test it myself.)

I had the same problem. I could solve this by using a second container. And this one is the one with the background image. So it works for me.

I’ve tried nesting the button container with a background into another blank holding container and then setting a radius to the holding container, but the same problem persists. Also this is a screenshot of the Composer view (edge-curving is displayed correctly there), not preview, so you might want to test it in the latter. Click Launch in your global toolbar, and then click the Open App Preview Portal button.

*I haven’t tried it in the mobile preview app(s) as we’re currently building a web app, not a native app.

I am curious, though. It looks like all you’ve done to the button is set the default theme background color. If so, why not use the Background Color section visible in the screenshot on the right-hand side? I don’t see a background image. Or maybe, I’m missing something here? :thinking:

Here’s the preview.
I set a colored background because in my use case i only want to show an image into this button. But it should not cover, it should only contain. (It’s for Quiz Buttons where the full image should be shown.)

So i have the outer Container which one is the “Image Button 1”. Padding is set to “0” and Radius is set to 10.
The Image Container is in the “Image Button 1” Container. It’s width is set to 100%, Margins and Padding are set to “0” and Align self is set to "Stretch Horizontally to fill the Container width. The resize mode is set to cover and radius is 10.
Button 5 is mostly same. No padding and margin. Same self align. The Background Color needs to be a rgba with a as “0”. e.g. rgba(0,0,0,0). Otherwise the image can’t be shown. The Radius is set to 10.
Nothing more.
But at properties you have to delete the Background image part and create a new property with Reference to child components as the Background Image of the “image container”. Value type at mine is Image Url.
This shoudl work then. These are exactly my settings.