Javascript 如何用背景img完全覆盖React组件？

我希望图像覆盖整个页面的宽度和高度

注意：我没有使用引导

这是登录页组件

 import React, { Fragment } from 'react'
import { Link } from 'react-router-dom'
const Landing = () => {
    return (

      <Fragment>
        <div className=''>
          <div className="jumbotron jumbotron-fluid">
            <div className="jumbo container">
              <div className="row justify-content-center text-center">
                <div className="col-md-10 col-lg-6">
                  <h1 className="display-5">The Coolest Online storage of personal Information</h1>

                  <p className="lead">How you store contacts have never been more secure. Where you choose to work has impact on your productivity and creativity.</p>

                  <Fragment>
                    <ul>
                  <li><Link className="btn btn-primary btn-lg" role="button" to="/register">Get Started</Link></li>
                  </ul>
                  </Fragment>
                </div>
              </div>
            </div>
          </div>
        </div>
      </Fragment>
    )
}
export default Landing

我想让图像覆盖整个页面，因为它是一个登录页。 我做错了什么

我认为有一个容器类阻碍了它的工作。但是如果我删除它，它会影响整个应用程序

  .container {
  max-width: 1100px;
  margin: auto;
  overflow: hidden;
  padding: 0 2rem;
}

在

父元素（要添加背景的位置） 添加

style={}

属性，在

style={}

中执行以下操作：

{background: `url()`, backgroundSize: 'cover'}

---

您应该将您的背景图像添加到jumbotron的父项div中，因为您的jumbotron似乎从顶部、右侧和左侧都有一些边距

.jumbotron-parent {
    background-image: linear-gradient(rgba(78, 78, 78, 0.8), rgba(0, 0, 0, 0.8)), url('./img/hero.jpg');
    background-size: cover;
    position: relative;
    height: 89vh;
    width: 100%;
}

---

它仍然不起作用。虽然我的应用程序的主体中有一个容器类，我认为它会妨碍它工作。是的，如果父容器的主体中有填充，那么它会防止它被卡在角落。

{background: `url()`, backgroundSize: 'cover'}

.jumbotron-parent {
    background-image: linear-gradient(rgba(78, 78, 78, 0.8), rgba(0, 0, 0, 0.8)), url('./img/hero.jpg');
    background-size: cover;
    position: relative;
    height: 89vh;
    width: 100%;
}