如何使一个组件具有全屏背景图像？

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