Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! Check out the docs.

Add background image to html.Div

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!

1 Like