Set background image to full screen in Reactjs

Question

I'm trying to set a background image in React but it only covers about 75% of the height.

It seems that the component doesn't take up all of the height.

What's the solution?

In index.js:

ReactDOM.render(<Login />, document.getElementById('root'));

In index.css:

html, body, .Login-component {
  height: 100%;
}

In Login.js:

render() {
    return (
      <div className='Login-component'>
    );
}

In Login.css

.Login-component {
    background: url(../static/login-bg.jpg) no-repeat center center fixed;
  background-size: cover;
}

The end result: Screen shot

Answer 1

Use vh and vw properties:

const styles = {
    container: {
        backgroundImage: `url(${backgroundImage})`,
        backgroundPosition: 'center',
        backgroundSize: 'cover',
        backgroundRepeat: 'no-repeat',
        width: '100vw',
        height: '100vh'
    }
};

Answer 2

Try using the specific property values.

In Index.css:

body, html {
    height: 100%;
    margin: 0;
}

In Login.css:

.Login-component {
    /* The image used */
    background-image: url(../static/login-bg.jpg);

    /* Full height */
    height: 100%; 

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}