Image transparency in plotly dash

Dash Python
1

Hello is there a way to change the transparency of an image. This is my code
import dash
from dash import html

app = dash.Dash(name)

app.layout = html.Div(
style={
“background-image”: “url(/assets/Coffee.png)”,
“background-repeat”: “no-repeat”,
“background-position”: “center center”, # Center the image
“background-size”: “cover”, # Cover the entire viewport
“height”: “100vh”, # Ensure the div takes up the full height of the viewport
“width”: “100vw”, # Ensure the div takes up the full width of the viewport
},
children=[
html.H1(“Coffee Sales In The USA”,
style={“color”:“#FFFFFF”}
),
html.P(“This image has an image in the background”)
]
)

if name == “main”:
app.run_server(debug=True)

2 
import dash
from dash import html

app = dash.Dash(__name__)

app.layout = html.Div(
    style={
        "background-image": "url(/assets/Coffee.png)",
        "background-repeat": "no-repeat",
        "background-position": "center center",
        "background-size": "cover",
        "height": "100vh",
        "width": "100vw",
        "position": "relative",  # Add this
    },
    children=[
        # Add a new div for the overlay
        html.Div(
            style={
                "position": "absolute",
                "top": 0,
                "left": 0,
                "right": 0,
                "bottom": 0,
                "background-color": "rgba(0, 0, 0, 0.5)",  # Adjust the last value (0.5) for transparency
            }
        ),
        html.H1("Coffee Sales In The USA", style={"color": "#FFFFFF", "position": "relative", "z-index": 1}),
        html.P("This image has an image in the background", style={"color": "#FFFFFF", "position": "relative", "z-index": 1}),
    ]
)

if __name__ == "__main__":
    app.run_server(debug=True)
1 Like
3

This worked perfectly thanks