score:24

Accepted answer

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;
}

score:0

while it is hard to troubleshoot without any code, check the root element to which your react component is being rendered to. setting height: '100%' in the style of your component will be in the context of it's parent div.

score:0

edit the css.

this might be what you are looking for:

<component style={{ minheight: '100%' }} /> 

if you meant that the background image is not covering the whole height, then add a classname to your component, import the css where you'll do something like this

score:17

the image should be inside your src folder besides that, inside your component you do the following.-

const imgmyimageexample = require('../assets/imageexample.jpg');
const divstyle = {
  width: '88%',
  height: '800px',
  backgroundimage: `url(${imgmyimageexample})`,
  backgroundsize: 'cover'   <---- this is important
};

export default class mycomponent extends react.component {
  render() {
    return (
      <div classname="ccomponent" style={divstyle} >
        <h1 align="center">some header example</h1>
      </div>
    );
  }
}

score:32

use vh and vw properties:

const styles = {
    container: {
        backgroundimage: `url(${backgroundimage})`,
        backgroundposition: 'center',
        backgroundsize: 'cover',
        backgroundrepeat: 'no-repeat',
        width: '100vw',
        height: '100vh'
    }
};

Related Query

More Query from same tag