Background image is not getting dispalyed

[MkRakesh]

I am using below code to display background in global app. but it is not showing up… can somebody help?

page_bg_img = """
<style>
body {{
background-image: url("https://i.imgur.com/Mk5CLjw.png");
background-size: cover;
}}
</style>
"""

# Display the background image
st.markdown(page_bg_img, unsafe_allow_html=True)

[AvratanuBiswas]

Hi, this code might help .

import streamlit as st

original_title = '<h1 style="font-family: serif; color:white; font-size: 20px;">Streamlit CSS Styling✨ </h1>'
st.markdown(original_title, unsafe_allow_html=True)


# Set the background image
background_image = """
<style>
[data-testid="stAppViewContainer"] > .main {
    background-image: url("https://images.unsplash.com/photo-1542281286-9e0a16bb7366");
    background-size: 100vw 100vh;  # This sets the size to cover 100% of the viewport width and height
    background-position: center;  
    background-repeat: no-repeat;
}
</style>
"""

st.markdown(background_image, unsafe_allow_html=True)

st.text_input("", placeholder="Streamlit CSS ")

input_style = """
<style>
input[type="text"] {
    background-color: transparent;
    color: #a19eae;  // This changes the text color inside the input box
}
div[data-baseweb="base-input"] {
    background-color: transparent !important;
}
[data-testid="stAppViewContainer"] {
    background-color: transparent !important;
}
</style>
"""
st.markdown(input_style, unsafe_allow_html=True)

[MkRakesh]

Hi AvratanuBiswas…your code is working great !!.. Thanks for timely help…