CODEWITHSUNDEEP
cssreactjsbackground-imageresponsive-images
Oussama
Oussama

Reputation: 63

ReactJS CSS backgroundImage create white space at the bottom when scrolling resizing Window

I'm developing a background of a react website, and I use it in the div above component, as I only want it to be the background of certain components not all the website.

The problem is that when I scroll or reisize my window, it shows white space under the image and also I can't use the image in css but just inline style since I want to stock it in variable later.

Hope I can get some helpful feedback.

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>

    );
    }

Upvotes: 0

Views: 1365

Answers (1)

matowang
matowang

Reputation: 11

Include this inline with the styles object

"backgroundSize": "cover"

Upvotes: 1

Related Questions