Search code examples
pythonweb-applicationsplotlyplotly-dashcytoscape

Can I set a background image for a Dash Cytoscape element?

I've got a grid of four Dash Cytoscape elements in my dash webapp representing the four rooms of a house. It would be great to have an icon for each room in the background of the element. 🏠

Is it possible to set a background image in Dash Cytoscape? It is for nodes, but I found no way for the whole space behind the nodes. I tried to achieve it trough the stylesheets but didn't succeed.

The app is written in python. I'm not experienced in web developing so I don't know anything about js.

I appreciate your help, maybe I'm not the first one trying to do this.

Solution

  • I just found out, if someone else is interested:

    It is possible with the background_image setting in the stylesheet:

    cyto.Cytoscape(
    id = 'cyto1',
    elements = edges + nodes,
    style = {'background-image': 'url(https://upload.wikimedia.org/wikipedia/commons/thumb/8/8f/Example_image.svg/600px-Example_image.svg.png)'}
)