Как установить фоновое изображение для всего экрана в файле приложения js в реакции js?

Question

Привет, я новичок, чтобы отреагировать, и мне нужно создать страницу входа с фоновым изображением, я создал новый компонент входа и назвал приложение. js, теперь, если я напишу любое свойство css, оно повлияет только компонент входа, но мне нужно фоновое изображение в качестве полной обложки.

ожидаемый вывод

текущее изображение

Мое приложение. js код:

var sectionStyle = {
  width: "100%",
  height: "400px",
  backgroundImage: "url(" + ( Background ) + ")"
};

class Section extends Component {
  render() {
    return (
      <section style={ sectionStyle }>
      </section>
    );
  }
}

class App extends Component {
    render() {
                return (
            <div className="App">
                <Login />
            </div>
        );
    }
}

Мой логин. js код:

render() {

        const { errors, formSubmitted } = this.state;

        return (

            <div className="Login"  style={divStyle}>
                <Row>
                    <form onSubmit={this.login}>
                        <FormGroup controlId="email" validationState={ formSubmitted ? (errors.email ? 'error' : 'success') : null }>
                            <ControlLabel>Email</ControlLabel>
                            <FormControl type="text" name="email" placeholder="Enter your email" onChange={this.handleInputChange} />
                        { errors.email &&
                            <HelpBlock>{errors.email}</HelpBlock>
                        }
                        </FormGroup>
                        <FormGroup controlId="password" validationState={ formSubmitted ? (errors.password ? 'error' : 'success') : null }>
                            <ControlLabel>Password</ControlLabel>
                            <FormControl type="password" name="password" placeholder="Enter your password" onChange={this.handleInputChange} />
                        { errors.password &&
                            <HelpBlock>{errors.password}</HelpBlock>
                        }
                        </FormGroup>
                        <Button type="submit" bsStyle="primary">Sign-In</Button>
                    </form>
                </Row>
            </div>

        )
    }
}

Любая помощь будет полезна.

Answer 1

Я пытался получить ожидаемый результат. Меня устраивает . под содержанием страницы.

import img from "../../assets/img/logo(name).svg";

   render() {
        return (
            <div className="content" style={{ overflow: "auto"}}>
                 <img id="logo-img" src={img} alt="logo" /> 
            </div>
       )
    }