Apply different background image for different pages in react js - css

Question

I want to have a different background image for the login page and home page. If I apply the image to body tag then it gets applied to all the pages. And when I apply it to a specific login page, it works but it only gets applied according to the width and height of the login page.
Applied in body in index.css
body{
background-image: url("http://web3canvas.com/wp-content/uploads/2014/02/littlevisuals-high-quality-hd-banner-images-stock-photos-free-laptop-topview-download.jpg");
background-size: cover;
}
Here is the login page
And this is the home page
And I want background image in only login page.
When I apply background image to only login page, this happens.
I have applied that image in the outermost div of the login page.
<div className={classes.body}>
<React.Fragment>
<CssBaseline />
<main className={classes.layout}>
<Paper className={classes.paper}>
<Avatar className={classes.avatar}>
<LockIcon />
</Avatar>
<Typography variant="headline" className={classes.color}>Sign in</Typography>
<form onSubmit={this.handleSubmit}>
<FormControl margin="normal" required fullWidth>
<Field
component={renderTextField}
label="Email"
id="email"
name="email"
value={email}
onChange={this.handleChange}
fullWidth
/>
</FormControl>
<FormControl margin="normal" required fullWidth>
<Field
value={password}
onChange={this.handleChange}
name="password"
type="password"
id="password"
component={renderTextField}
label="Password"
className={classes.color}
fullWidth />
</FormControl>
<Button type="submit"
disabled={pristine || submitting}
fullWidth
variant="outlined"
color="secondary"
className={classes.submit}
>
Submit
</Button>
</form>
<Button
fullWidth
variant="outlined"
color="primary"
className={classes.submit}>
<Link to="/register">
New User ? Register Here
</Link>
</Button>
<SocialButton
fullWidth
variant="raised"
color="primary"
className="btn btn-danger form-control"
provider='google'
appId='967209745915-djav2bq5ic5r4ad9on3itp5a079s1ruu.apps.googleusercontent.com'
onLoginSuccess={this.handleSocialLogin}
onLoginFailure={this.handleSocialLoginFailure}
key={'google'}
>
Login with Google
</SocialButton>
</Paper>
</main>
</React.Fragment>
</div>
Help me out someone.
Edit --
I am using Material UI
This is the full login page code.
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { userActions } from '../../_actions';
import '../../index.css';
import axios from 'axios';
import { history } from '../../_helpers/history';
import SocialButton from '../../SocialButton';
import compose from 'recompose/compose';
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Avatar from '#material-ui/core/Avatar';
import Button from '#material-ui/core/Button';
import CssBaseline from '#material-ui/core/CssBaseline';
import FormControl from '#material-ui/core/FormControl';
import Input from '#material-ui/core/Input';
import InputLabel from '#material-ui/core/InputLabel';
import LockIcon from '#material-ui/icons/LockOutlined';
import Paper from '#material-ui/core/Paper';
import Typography from '#material-ui/core/Typography';
import withStyles from '#material-ui/core/styles/withStyles';
import { Field, reduxForm } from 'redux-form'
import TextField from '#material-ui/core/TextField'
import { IndefiniteObservable } from '../../../node_modules/indefinite-observable';
const styles = theme => ({
layout: {
width: 'auto',
display: 'block', // Fix IE11 issue.
marginLeft: theme.spacing.unit * 3,
marginRight: theme.spacing.unit * 3,
[theme.breakpoints.up(400 + theme.spacing.unit * 3 * 2)]: {
width: 400,
marginLeft: 'auto',
marginRight: 'auto',
},
},
paper: {
marginTop: theme.spacing.unit * 13,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
padding: `${theme.spacing.unit * 2}px ${theme.spacing.unit * 5}px ${theme.spacing.unit * 5}px`,
background: 'linear-gradient(to bottom, rgba(146, 135, 187, 0.8) 0%, rgba(0,0,0,0.6) 100%)',
transition: 'opacity 0.1s, transform 0.3s cubic-bezier(0.17, -0.65, 0.665, 1.25)',
transform: 'scale(1)'
// backgroundImage: `url("http://web3canvas.com/wp-content/uploads/2014/02/littlevisuals-high-quality-hd-banner-images-stock-photos-free-laptop-topview-download.jpg")`,
},
body: {
backgroundImage: `url("http://web3canvas.com/wp-content/uploads/2014/02/littlevisuals-high-quality-hd-banner-images-stock-photos-free-laptop-topview-download.jpg")`,
backgroundSize: 'cover',
},
color: {
color: 'black',
},
avatar: {
margin: theme.spacing.unit,
backgroundColor: theme.palette.secondary.main,
},
form: {
width: '100%', // Fix IE11 issue.
marginTop: theme.spacing.unit,
},
submit: {
marginTop: theme.spacing.unit * 2,
marginBottom: theme.spacing.unit * 2
},
});
const renderTextField = ({
input,
label,
meta: { touched, error },
...custom
}) => (
<TextField
hintText={label}
floatingLabelText={label}
errorText={touched && error}
{...input}
{...custom}
/>
)
const validate = values => {
const errors = {}
const requiredFields = [
'firstName',
'lastName',
'email',
'favoriteColor',
'notes'
]
requiredFields.forEach(field => {
if (!values[field]) {
errors[field] = 'Required'
}
})
if (
values.email &&
!/^[A-Z0-9._%+-]+#[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)
) {
errors.email = 'Invalid email address'
}
return errors
}
class LoginPage extends Component {
constructor(props) {
super(props);
// reset login status
this.props.dispatch(userActions.logout());
this.state = {
email: '',
password: '',
submitted: false
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.handleSocialLogin = this.handleSocialLogin.bind(this);
this.handleSocialLoginFailure = this.handleSocialLoginFailure.bind(this);
}
handleSocialLogin(user) {
console.log(user)
debugger;
if (user) {
this.props.dispatch(userActions.googlelogin(user));
}
}
handleSocialLoginFailure = (err) => {
console.error(err)
}
handleChange(e) {
const { name, value } = e.target;
this.setState({ [name]: value });
}
handleSubmit(e) {
debugger;
e.preventDefault();
this.setState({ submitted: true });
const { email, password } = this.state;
const { dispatch } = this.props;
if (email && password) {
dispatch(userActions.login(email, password));
}
}
render() {
const { classes } = this.props;
const { email, password, submitted } = this.state;
const { handleSubmit, pristine, reset, submitting } = this.props
return (
<div className={classes.body}>
<React.Fragment>
<CssBaseline />
<main className={classes.layout}>
<Paper className={classes.paper}>
<Avatar className={classes.avatar}>
<LockIcon />
</Avatar>
<Typography variant="headline" className={classes.color}>Sign in</Typography>
<form onSubmit={this.handleSubmit}>
<FormControl margin="normal" required fullWidth>
<Field
component={renderTextField}
label="Email"
id="email"
name="email"
value={email}
onChange={this.handleChange}
fullWidth
/>
</FormControl>
<FormControl margin="normal" required fullWidth>
<Field
value={password}
onChange={this.handleChange}
name="password"
type="password"
id="password"
component={renderTextField}
label="Password"
className={classes.color}
fullWidth />
</FormControl>
<Button type="submit"
disabled={pristine || submitting}
fullWidth
variant="outlined"
color="secondary"
className={classes.submit}
>
Submit
</Button>
</form>
<Button
fullWidth
variant="outlined"
color="primary"
className={classes.submit}>
<Link to="/register">
New User ? Register Here
</Link>
</Button>
<SocialButton
fullWidth
variant="raised"
color="primary"
className="btn btn-danger form-control"
provider='google'
appId='967209745915-djav2bq5ic5r4ad9on3itp5a079s1ruu.apps.googleusercontent.com'
onLoginSuccess={this.handleSocialLogin}
onLoginFailure={this.handleSocialLoginFailure}
key={'google'}
>
Login with Google
</SocialButton>
</Paper>
</main>
</React.Fragment>
</div>
);
}
}
LoginPage.propTypes = {
classes: PropTypes.object.isRequired,
};
function mapStateToProps(state) {
const { loggingIn } = state.authentication;
return {
loggingIn
};
}
export default compose(
withStyles(styles),
connect(mapStateToProps, null),
reduxForm({
form: 'MaterialUIForm',
validate
})
)(LoginPage);
I will put the code on stackblitz in a few minutes

Answer 1

Create unique classNames for each component, wrap other content inside the classNames div element.
for Login component
render() {
return (
<div className="login">
//other code
</div>
)
}
for Home component
render() {
return (
<div className="home">
//other code
</div>
)
}
In index.css apply the color for the classNames.
.login {
background: url("http://web3canvas.com/wp-content/uploads/2014/02/littlevisuals-high-quality-hd-banner-images-stock-photos-free-laptop-topview-download.jpg") no-repeat;
background-size: cover;
min-width: 100%;
min-height: 100%;
}
.home {
background: url("https://www.w3schools.com/cssref/mountain.jpg") no-repeat; background-size: cover;
min-width: 100%;
min-height: 100%;
}

Answer 2

If you want to use styled Components, which is fully compatible with Material UI,
you can just replace the <div className={classes.body}> with your custom <StyledBody>
import styled from 'styled-components';
const StyledBody = styled.div`
background: url('http://web3canvas.com/wp-content/uploads/2014/02/littlevisuals-high-quality-hd-banner-images-stock-photos-free-laptop-topview-download.jpg');
background-size: cover;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
`;
export default function Login(props) {
return (
<StyledBody>
// your login component
</StyledBody>
);
}
If you haven't already, be sure to install styled-components first with npm i styled-components
Of course the same css code would work however you want to use it.

Answer 3

document.body.style.backgroundImage = "url('image url')";