Background image instead of colour

Anvil Q&A
1

Is it possible to set the background colour of a button or label or link to an image instead?
I’m not very good with CSS but I tried making a role having background image but it doesn’t work for some reason.

I know I can go for XY panel but they totally mess up my formatting.

Also, I’ll want the background image from a data table.

2

Sure - what did the role look like that you wrote?

3

Well I managed to change the background image of a button now but the problem is that I can’t figure out how to get it from data table

    .anvil-role-backgroundimage {
  background: url(_/theme/header.jpg);
}

This gave me the image from header.jpg file in my app

But I want to get this image from a cell in data table

And it should vary for every user

4

Have you thought about using a link wrapped around an image?
Otherwise I’d probably recommend the XYPanel route.
Particular since you’re using dyncamic urls from datatables.

If you do want to go down the css/html route. You’d probably have to dynamically change the style attribute of each button element directly accessing the dom node via anvil.js.get_dom_node()

5

Can you please explain more about the link feature?

Also, the problem with XY Panel is that it is a bad option for mobiles.

Like if I want to display a component on the right side of XY panel, it will be displayed well on a PC but if you see the website on mobile, the component will disappear.

Although if you can suggest a way to fix this, I will of course go with XY panel

6

link/image:
I mean add Link Component. Then add an Image component inside it.
You can then set the source of the Image to be the url from the datatable and the Image is now clickable.

7

Can’t an image be clickable using mouse down anyway?

Basically I’m trying to make a Story/Status feature like on Instagram and WhatsApp

And as we talked about before, you can’t change font sizes in Canvas or properly format it to so that the text is displayed across several lines.

That’s why, adding background images to buttons or labels will work for me.

Unless you can tell me a way to fix the problem in XY panel I mentioned above.

8

Sure - why not do that then with the text below?

9

But I’ll like the text to be inside the image.

Is PIL my only option now?

10

I tried setting the background image using javascript today and was successful. I can now set background images from data table as well.

However, I don’t know why but the background image applies to every container in my form now.

https://anvil.works/build#clone:WT4C5I6LCXBPC66G=T2TPGNVU2L5STKHKDAIEOEHB

11

It looks like you’ve managed to do this now.

Worth noting you don’t need to leave python to get your code snippet to work

import anvil.js

... 
  def __init__(self, **properties):
    self.init_components(**properties)
    dom_node = anvil.js.get_dom_node(self)
    dom_node.style.background = f"url({self.backgroundimage})"
12

That was indeed better. Many thanks for your help