background.py

import streamlit as st
import base64

def set_bg_image_url(image_url):
    '''
    A function to set an image URL as a background with a reduced height and a blur effect.
    Parameters
    ----------
    image_url : str
        URL to the image file.
    Returns
    -------
    None
    '''
    st.markdown(
        f"""
        <style>
        .stApp {{
            position: relative;
            background: url({image_url});
            background-size: 20px 30px;
 /* Ensure the background covers the whole container */
            background-position: center;
            background-repeat: no-repeat;
            height: 20vh; /* Reduce the height of the background image */
            width: 20vw;
            overflow: hidden;
        }}
        
        .background-overlay {{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.6); /* Semi-transparent white overlay */
            filter: blur(15px); /* Adjust the blur radius to your preference */
            z-index: -1; /* Ensure it's behind the content */
        }}
        
        .main-content {{
            position: relative;
            z-index: 1;
            padding: 20px;
            background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent white background for content */
            border-radius: 8px; /* Rounded corners for better appearance */
            width: 20%; /* Adjust width to your preference */
            margin: auto; /* Center the content */
        }}
        </style>
        """,
        unsafe_allow_html=True
    )

    # Add background overlay
    st.markdown('<div class="background-overlay"></div>', unsafe_allow_html=True)

# Call the function with the provided image URL
set_bg_image_url("https://tallysolutions.com/wp-content/themes/tally/assets/images/resources-home-page/why-tally-prime-image.svg")

# Example Streamlit content
st.markdown('<div class="main-content">', unsafe_allow_html=True)

st.title("CSV to XML Converter")
st.write("A web application that is used for converting CSV to XML format.")
st.info("Currently supporting XML conversion for limited CSV files pertaining to TallyPrime")

# Add your Streamlit content here, e.g.:
# - Select box
# - Dataframe display
# - File uploader

st.markdown('</div>', unsafe_allow_html=True)

# Inject CSS with Streamlit (optional if needed)
st.markdown(
    f"""
    <style>
    .stApp {{
        background-size: cover; /* Ensure the background covers the container */
        background-position: center;
        background-attachment: fixed;
        z-index: -1; /* Ensure the background is behind the content */
    }}
    </style>
    """,
    unsafe_allow_html=True
)