Hey there, I'm a newbie to react and I'm trying to create a login page with a background image. I have already set up a new login component in app.js but when I apply any CSS properties, it only affects the login component. What I really need is for the background image to cover the entire page.
The code in my app.js file looks like this:
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>
);
}
}
This is what my code in login.js file looks like:
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>
)
}
}
Would greatly appreciate any assistance or guidance on this matter.