Is there a way in Dash to add a local or url image as a background for html.Div ?
Yes
You just need to add
Style={‘background-image’: ‘url(link)’}
In html.div
Thank you Rohit for your reply. I am wondering which github repository I have to look into to explore all different options related to html.Div.
just search html related tags according to your needs and add them as style dict in html Div .
This will solve most of problem related to layouts
For example, see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div or https://developer.mozilla.org/en-US/docs/Web/CSS/background-image
How does this relate to https://github.com/plotly/dash/issues/71 and Adding a background image?
I’ve managed to get the GitHub #71 dropdown image to work, but the base64 encoding does not work for me.
Hi there,
Apologies for re-asking the same question, but I’ve been hitting my head off a brick wall with this one… I’ve been having this same issue and I just can’t seem to work out how to display a locally stored image as a background for my dashboard. This is made all the more confusing since I tried a quick and dirty test just using html and css and it worked fine.
My HTML and CSS code which currently works is as follows:
HTML
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="app0">Test</div>
</body>
CSS
.app0
{
background-image: url('Background.PNG');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: fixed;
min-height: 100%;
min-width: 100%;
}
I’ve tried different combinations to try and replicate the above in dash, but it just doesnt want to work at all. I’ve even tried the above suggested answer using inline style:
layout = html.Div(style={'backgroundImage': 'url(Background.PNG)', 'backgroundRepeat': 'no-repeat', 'backgroundPosition': 'center', 'backgroundSize': 'cover', 'position': 'fixed'})
This also is, unfortunately, not working…
I think I’m missing something really obvious, but would be grateful for anyone willing to give me any advice.
Many thanks
I think the trick is just making sure that you have the image located where Dash will automatically serve it up as a static asset. If you create a directory in the root of your Dash app named assets
and place Background.PNG
in there, then the following CSS style applied to the relevant element should do the trick:
background-image: url("/assets/Background.PNG");
Aha! Thanks that has worked perfectly, the most frustrating problems are always something so simple and obvious!