背景图片拒绝覆盖整页

Question

这是页面组件本身，它之前工作正常，但不知为何它开始像这样。

我没有更新它刚刚破坏的任何包，我认为问题是父组件高度未定义，因此子组件将高度设置为仅适合内容。

import React, { Component } from 'react';
import Navbar from './navbar';
import { withStyles } from '@material-ui/core/styles';
import Avatar from '@material-ui/core/Avatar';
import Grid from '@material-ui/core/Grid';
import Chip from '@material-ui/core/Chip';
import amumu from '../Images/amumusad.png';
import Modal from 'react-responsive-modal';
import fortniteDab from '../Images/fortnitedab.png';
import compose from 'recompose/compose';
import { withNamespaces } from 'react-i18next';
import {connect} from 'react-redux';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import {CopyToClipboard} from 'react-copy-to-clipboard';
import Snackbar from '@material-ui/core/Snackbar';
import Tooltip from '@material-ui/core/Tooltip';
import {Helmet} from "react-helmet";

const styles = theme => ({
    chip: {
        minWidth: 350,
        margin: theme.spacing.unit,
        fontSize: 14,
        [theme.breakpoints.up('sm')]: {
          fontSize: 20,
        }
    },
    fab: {
        margin: theme.spacing.unit,
        fontSize: 10,
        minWidth: 250,
        maxWidth: 250,
        [theme.breakpoints.up('lg')]: {
          fontSize: 12,
          minWidth: 250,
          maxWidth: 250,
        }
    },
    fbAvatar: {
        margin: 10,
        width: 50,
        height: 50,
        fontSize: 20,
        color: '#fff',
        fontWeight: 'bold',
        backgroundColor: '#3F51B5',
      },
    emailAvatar: {
        margin: 10,
        width: 50,
        height: 50,
        fontSize: 20,
        color: '#fff',
        fontWeight: 'bold',
        backgroundColor: '#f50057',
      },
    container: {
        display: 'flex',
        flexWrap: 'wrap',
      },
    textField: {
        marginLeft: theme.spacing.unit,
        marginRight: theme.spacing.unit,
        backgroundColor: '#fff',
        width: 240
      },
    resize:{
        fontSize:17
    },
    extendedIcon: {
        marginRight: theme.spacing.unit * 3,
    },
    descStyle: {
        fontSize: 12,
        color: 'white',
        textAlign: 'center',
        [theme.breakpoints.up('sm')]: {
          fontSize: 15,
        }
    },
});

const ErrorStyle = {
    overlay: {
      background: "transparent"
    },
    modal: {
      backgroundColor: 'rgba(219, 105, 105, 0.9)',
      color: "white",
      borderRadius: '10px',
    },
}

const SuccessStyle = {
    overlay: {
      background: "transparent"
    },
    modal: {
      backgroundColor: 'rgba(124, 214, 105, 0.9)',
      color: "white",
      borderRadius: '10px',
      width: 400
    },
}

class Contact extends Component {

    state = {
        Url: this.props.server.main,
        name: "",
        email: "",
        subject: "",
        body: "",
        payload: "",
        ErrorModal: false,
        ErrorMsg: '',
        SuccessModal: false,
        SuccessMsg: '',
        copied: false
    }

updateInput(key, value) {
this.setState({ [key]: value });
}

onChange = (value) => {
this.setState({captcha: value})
}

onOpenModal = (type) => {
this.setState({[type]: true });
};

onCloseModal = (type) => {
this.setState({[type]: false });
};

render() {
const { classes } = this.props;
const { t } = this.props;
    return (
    <div className="GG-BG-INVERSE"> 
    <Helmet>
        <title>{t('contactTitle')}</title>
        <meta name="description" content={t('contactTitle')} />
    </Helmet>
    <Navbar page={2}/>
        <div className="container">
            <div className="BlackBG">

                <div style={{height: 70, margin: 10}}>
                    <Grid container justify="center" alignItems="center">
                        <Chip
                                icon={<Avatar className={classes.fbAvatar}>F</Avatar>}
                                label={t('contactFBTitle')}
                                className={classes.chip}
                                color="default"
                            />
                    </Grid>
                </div>

                <div style={{height: 50}}>
                    <Grid container justify="center" alignItems="center">

                    </Grid>
                </div> 

                <Grid container justify="center" alignItems="center">
                    <Chip
                            icon={<Avatar className={classes.emailAvatar}>@</Avatar>}
                            label={t('contactEmailTitle')}
                            className={classes.chip}
                            color="default"
                        />
                </Grid>

                    <ListItem className={classes.descStyle}>
                        <ListItemText disableTypography primary={t('contactRule1')} />
                    </ListItem>
                    <ListItem className={classes.descStyle}>
                        <ListItemText disableTypography primary={t('contactRule2')} />
                    </ListItem>

                    <Snackbar
                        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
                        open={this.state.copied}
                        onClose={()=>{this.setState({ copied: false })}}
                        transitionDuration={500}
                        autoHideDuration={1000}
                        ContentProps={{
                            'aria-describedby': 'message-id',
                        }}
                        message={<h4 id="message-id">{t('copiedEmail')}</h4>}
                    />
            </div>
        </div>
        <Modal open={this.state.ErrorModal} onClose={this.onCloseModal.bind(this,'ErrorModal')} center
            styles={ErrorStyle}>
            <h3 className="col-xs-6">{this.state.ErrorMsg}</h3>
            <img style ={{width: 150, height: 120}} className="col-xs-6" src={amumu} alt=""></img> 
        </Modal>
        <Modal open={this.state.SuccessModal} onClose={this.onCloseModal.bind(this,'SuccessModal')} center
            styles={SuccessStyle}>
            <h3 className="col-xs-6">{this.state.SuccessMsg}</h3>
            <img style ={{width: 150, height: 120}} className="col-xs-6" src={fortniteDab} alt=""></img>
        </Modal>
    </div>
    );
  }
}

function mapStateToProps(state){
    return {
        server: state.server
    }
}

export default compose(
    withStyles(styles),
    withNamespaces(),
    connect(mapStateToProps),
)(Contact);

背景图片只覆盖了内容，然后在屏幕左边留白后中断，如下图所示：

这是我的背景图片 css 代码：

.blackBackground {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #121212; 
}

Answer 1

我会说包含背景图像的 div 是这里的问题。确保 div 扩展了整个宽度和高度，这样背景图像就会跟随。

Answer 2

尝试添加width: 100%;

.blackBackground {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #121212; 
  width: 100%
}

您的问题编辑后：

您的容器正在包裹黑色背景。你可以试试container-fluid 或者像这样修改你的代码：

<Navbar page={2}/>
    <div className="BlackBG">
        <div className="container">
        ...

这样黑色背景就不会受到container的宽度的限制。