0

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?

Michel
  • 769
  • 4
  • 19
Agnes Lee
  • 322
  • 1
  • 12
  • I haven't tried it because I couldn't find a suitable image, but it looks like the following method is possible with html settings. Please refer to [this answer](https://stackoverflow.com/questions/12605908/change-background-image-opacity). – r-beginners Jun 11 '21 at 05:29
  • You can put styles in a css file in your assets directory, it would be easier to set the background on the body or on any other element. – EricLavault Jun 11 '21 at 10:07
  • I've not done in dash, but in my html apps I create a `
    ` and style it as height, 100%, width 100%, z-index -1
     – Rob Raymond Jun 11 '21 at 11:59

0 Answers0