Add a Background Image

Using Streamlit
1 
import streamlit as st
import base64

# Load background image
background_image_path = "1.jpg"
with open(background_image_path, "rb") as image_file:
    encoded_image = base64.b64encode(image_file.read()).decode()

# Define the HTML template with inline CSS for background and button
html_template = f"""
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Asset Development </title>
    <style>
        body {{
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-image: url(data:image/jpg;base64,{encoded_image});
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            height: 100vh;
            width: 100vw;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }}
        .container {{
            width: 60%;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 10px;
        }}
        .container h1 {{
            font-size: 24px;
            margin-bottom: 20px;
        }}
        .container button {{
            background-color: #ff4747;
            color: #fff;
            padding: 10px 20px;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }}
    </style>
</head>
<body>
    <div class="container">
        <h1>Asset Development </h1>
        <button>START</button>
    </div>
</body>
</html>
"""

# Use Streamlit to render the HTML template
import streamlit.components.v1 as components
components.html(html_template, height=600)

I am trying to have a background Image for my application and have all the streamlit components used on top of it
but I find it hard to achieve, any suggestions?

2

Hi @priyanka.vijay-bavis,

Thanks for sharing this question!

Are you able to get the image to render in the background and just having issues with the components on top of it?

Please share screenshots of how it looks like atm.

You can also try out this solution.