When you insert style as markdown, it creates a blank line. Either move all the displayed content to the top, or use containers to relegate style to a footer section:
import streamlit as st
import streamlit.components.v1 as components
st.title("Get in Touch with Us !")
# Put all the markdown that has human-readable pieces here
body = st.container()
# Put all the markdown that only contains style and no rendered elements here
footer = st.container()
footer.markdown('<style>div[class="css-zt5igj e16nr0p33"] {color:white; text-align:center;font-size:50px; font-family: Lucida Handwriting; margin-bottom:0.001px; } </style>', unsafe_allow_html=True)
body.markdown(f'<img src="https://images.assetsdelivery.com/compings_v2/rondale/rondale1608/rondale160800047.jpg" alt width="1085" height="250" style="transform:rotate(0deg);"/>', unsafe_allow_html=True)
As for the blurring,
- You can use box shadow to “color in” the edges if you know the background color for sure. (Not responsive to dark mode/light mode changes)
- You can use an image mask via webkit if you want, but there can be browser compatibility issues with that.
- You can re-save your background image with a transparency gradient/blur built in to the image itself.
Since your image doesn’t have any transparency and has its own black background, here’s what box-shadow would be (you will have hard edges in light mode):
css=r'''
#img-div {
background: url(https://images.assetsdelivery.com/compings_v2/rondale/rondale1608/rondale160800047.jpg) no-repeat;
background-size: 100% 100%;
box-shadow: -20px -20px 20px 20px black inset;
width: 100%;
height: 250px;
outline: 2px solid black;
outline-offset: -1px;
border-radius: 50%/30%;
}
'''
body.markdown(f'<style>{css}</style><div id="img-div"> </div>', unsafe_allow_html=True)
