Hi Dash community! I’m just getting started with dash, and had a simple question I haven’t been able to get an answer for. Say I have a dash bootstrap column, dbc.Col. I want to place a html.Img inside of this column, and then place a pair of rows directly over the top of this, so that any text boxes in these rows overlap the image. Whenever I try particular settings to do this, it either nudges the rows or the image such that they are next to one another instead. How do I resolve this seemingly simple issue?
Hello @Huntsforwimps,
Welcome to the community!
I think the easiest and straightforward way would be to utilize your css stylesheet and have the column have a background image. Then anything that goes over top will only display the actual content. You might be able to just do the style inside of dash, but I’m not sure it can handle the url() needed to place an image in a background image.
That sounds simple enough! So for some psuedocode:
row1 = dbs.Row(stuff) row2 = dbs.Row(stuff) content = dbs.Col([row1, row2], style={"background-image":"url"})
Changing url to whatever format I may need to, in case dash doesn’t do well with a url there?
Thanks for the quick reply!
Look up how to add a stylesheet in dash, and add the desired url in the stylesheet. I have more luck with that.