Currently, I am working on creating a background for a React website and implementing it in the div above component. My purpose is to have this background only appear on specific components and not throughout the entire website.
However, I am encountering an issue where there is white space beneath the image when I scroll or resize the window. Additionally, I am unable to use the image in CSS as I need to store it in a variable later on - so I am restricted to using inline styles.
I would greatly appreciate any helpful feedback or suggestions on how to address these challenges.
render(){
return (
<div style={{ backgroundImage: `url(${background})`,height:"100vh",backgroundSize : "100% 100%",backgroundAttachment: "scroll", backgroundRepeat: "norepeat", backgroundPosition: "center center"}}>
<div style={{paddingTop : '5%'}}>
<Registration />
</div>
</div>
);
}