reactjs背景图像无法全屏显示

Question

我试图从reactjs开始，并试图通过路由进行登录，注册和主屏幕。 下面是代码。

import React from 'react';
import { render } from 'react-dom';

import { App } from './App/App.js';
import {Login} from './LoginPage.js';
import '../src/styles/homestyle.css';

// setup fake backend
import { configureFakeBackend } from './_helpers/fake-backend.js';
configureFakeBackend();

render(
<App />,
document.getElementById('app')
);

用于路由的App.js代码。

import { HomePage } from '../HomePage/Homepage.js';
import { LoginPage } from '../LoginPage.js';
import { RegisterPage } from '../RegisterPage.js';
import { Details } from '../_details/Details.js';
import {styles} from '../styles/homestyle.css';


class App extends React.Component {
render() {
    return (
        <div className="login">

                    <Router>
                        <div>                            
                <PrivateRoute  path="/" exact component=    {HomePage} />
                  <Route  path="/login"  exact  component={LoginPage} />
             <Route  path="/register"  exact  component={RegisterPage} />
                        </div>
                    </Router>
                </div>

    );
}

下面是我的登录屏幕。

 render() {
    const { username, password,confirmpassword, submitted, loading, error } = this.state;
    return (
        <div className="innerdiv">
         <div className = "demo">
            <div className="movie-dcard">
                Username: test<br />
                Password: test
            </div>
            <h2 align = "center">Login </h2>
            <form name="form" >
            <div className={'form-group'}>
                    <button className={'form-group'} onClick = {this.handleRegisterClick} disabled={loading}>Register</button>
                    {loading &&
                        <img src="data:image/gif;base64,R0lGODlhEAAQAPIAAP" />
                    }
                </div>
            </form>
             <form name="form" onSubmit={this.handleSubmit}>
                <div className={'form-group' + (submitted && !username ? ' has-error' : '')}>
                    <label htmlFor="username">Username</label>
                    <input type="text" className="form-control" name="username" value={username} onChange={this.handleChange} />
                    {submitted && !username &&
                        <div className="help-block">Username is required</div>
                    }
                </div >
                <div className = {'form-group'+ (submitted && !confirmpassword ? 'has-error' : '')}>
                <label htmlFor = "confirmpassword">confirm Password</label>
                <input type = "text" className = "form-control" name = "confirmpassword" value = {confirmpassword} onSubmit = {this.handleChange} />
                {submitted && !confirmpassword &&
                        <div className="help-block"> confirm Password is required</div>
                    }
                    </div>
                <div className={'form-group' + (submitted && !password ? ' has-error' : '')}>
                    <label htmlFor="password">Password</label>
                    <input type="password" className="form-control" name="password" value={password} onChange={this.handleChange} />
                    {submitted && !password &&
                        <div className="help-block">Password is required</div>
                    }
                </div>
                <div>
                <div className={'form-group'}>
                    <button className="btn btn-primary" disabled={loading}>Login</button>
                    {loading &&
                        <img src="data:image/gif;base64,R0lGODlhEAAQAPIAAP" />
                    }
                </div>

                </div>
                {error &&
                    <div className={'alert alert-danger'}>{error}</div>
                }
             </form>
            </div>
        </div>
    );
}
}

css是

   .movie-card {
    background-color: red;
    align-content: center;
    text-align: center;

  }
  .background {
    height: 100%;
    background-image: url("/images/background.jpg");
    -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
    }
    .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; 
      -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
    }

.home {
  background: url("https://www.w3schools.com/cssref/mountain.jpg") no-repeat; background-size: cover;
  height: 100vh;
 width: 100vw;
}

.innerdiv {
  align-content: center;
  height: 20%;
 margin: auto;
 width: 50%;
 border: 3px solid green;
 padding: 10px;
}

但是我无法将背景图像设置为全屏。

请让我知道如何将每个页面/屏幕的背景设置为具有不同图像的全背景。

Answer 1

您可以尝试将其放在全局CSS文件中，并将主要组件的高度设置为100％：

html,
body,
#app {
    height: 100%;
}