How to place text on an image in dash?

Dash Python
1

Hi,
Is there anyway a text can be placed on an image, like labels .Also,every time I align the text with the image, the components next to it also get altered, is there any simple way to fix this ?

2

Any Solution yet ?

3

Hey @yogi_dhiman, are you referring to an image in an html component or a DVD.Graph()?

4

Hey AIMPED ,

I want to put background image in a plot and put some text over it on the same plot ( Text input could be from go.Indicator() or go.table() ) . Is it possible to achieve in dash.

5

Hey @yogi_dhiman like this?

search on this page for

Including tuple elements in a theme

6

Here is the solution I found after much research


html.Div(id = 'img_container',children = [ 
                                        html.Img(id = 'picture_bg' ,src=dash.get_asset_url('bg_template.png'),
                                                 style={"position": "absolute", "top": "0", "right": "20px", "width": "378px", "height": "843px", "object-fit": "cover"}),
                                        html.Div(id="text_overlay",
                                                children=[
                                                    html.P("Offline",id='text_box', style={"position": "absolute", "top": str(int(img_h*.07*1.15))+"px", "right": str(int(img_w*.48))+"px", "color": "white", "font-size": "20px"}), ],)
                                         ],style={"padding": "0", "margin": "0", "width": "100%", "height": "100%", "position": "relative"})

The code just paste a bg image over a DIV with no padding and margin . Then place a html.P tag to place the text at position relative to div.

2 Likes