Как сделать так, чтобы у одного компонента было полноэкранное фоновое изображение?

Question

Я хотел бы установить фон только для этого компонента ниже, а не где-либо еще. Другими словами, когда пользователь нажимает Login или Sign Up, на следующей странице, к которой он идет, не должно быть фонового изображения, которое должно принадлежать только этому LoginSignUpContainer.

Я осмотрел сеть и ТАК и все еще не мог найти решение серебряной пули для этого. Я понимаю, что React.js предназначен для SPA (одностраничных приложений), но я уверен, что это все еще возможно.

Моя попытка ниже, наряду со многими другими попытками, не принесла мне никакой справедливости.

Что я делаю не так и как я могу это исправить?

Вот мой код JS:

import React, { Component } from 'react'
import Login from './Login/Login';
import SignUp from './SignUp/SignUp';
import './LoginSignUpContainer.css';

class LoginSignUpContainer extends Component {
    constructor(props) {
        super(props);
        this.state = {
            login: true,
            signUp: false
        };
        this.switchTabs = this.switchTabs.bind(this);
    }

    switchTabs(word) {
        let login, signUp;

        if(word === "Sign Up") {
            login = false;
            signUp = true;
        } else {
            login = true;
            signUp = false;
        }

        this.setState({login: login, signUp: signUp});
    }

    render() {
        return(
            <div className="back col-md-4 col-md-offset-4">
                <p id="login" onClick={this.switchTabs.bind(null, "Sign Up")}>Sign Up</p>
                <p id="login" onClick={this.switchTabs.bind(null, "Login")}>Login</p>

                {this.state.signUp ? <SignUp/> : null}
                {this.state.login ? <Login/> : null}
            </div>
        );
    }
}

export default LoginSignUpContainer;

Вот код CSS:

.back {
    background-image: url("../path/picture.png");
    height: 100%;
}

Answer 1

Поскольку я не вижу ваш результат на экране, я не уверен на 100%, как он отображается.

Но попробуйте изменения стиля ниже и посмотрите,

.back {
    background-image: url("../path/picture.png");
    height: 100%;
    background-size: cover;
}