Plotly Dash: editing background image

I'm currently working on Plotly Dash on Google Colab. I was able to set the background image, now looking for a way to make the background fixed while scrolling through the dashboard & reducing the image opacity to half to enable easier reading of other texts & graphs

Here is a sample of my code for the layout part:

import dash
import dash_core_components as dcc
import dash_bootstrap_components as dbc
import dash_html_components as html
import pandas as pd
from jupyter_dash import JupyterDash
import base64

app = JupyterDash(__name__)

app.layout = html.Div([
    
    html.Div([

        html.Div([
            html.Div([
                html.Label('Dropdown selection'),], style={'font-size': '25px'}),
            dcc.Dropdown(
                id='cluster_group',
                options=[{'label': i, 'value': i} for i in df.options],
                value='0',
            )], style={'width': '49%', 'display': 'inline-block'}),

    html.Div([
        dcc.Graph(
            id='scatter-plot',
        )], style={'width': '65%', 'height':'50%', 'display': 'inline-block', 'padding': '0 20'}),
    
    html.Div([
        dcc.Graph(id='barchart-plot'),
    ], style={'display': 'inline-block', 'width': '50%'}),

    ])
    
    ], style= {'background-image': 'url("https://www.randomurlfrominternet.com/someimage.jpg")',
               'background-repeat': 'no-repeat',
               'background-position': 'center top'
               })

I have tried adding 'position' : 'fixed' into the last section of style but it removed the scrolling bar- I was unable to scroll down to view the second graph on my dashboard underneath the first graph

I have also tried 'opacity' : '0.5', it reduced the opacity of the entire dashboard instead of just the background image

Is there a solution to this?



Read more here: https://stackoverflow.com/questions/67931275/plotly-dash-editing-background-image

Content Attribution

This content was originally published by Agnes Lee at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: