Блог

Я хочу, чтобы изображение покрывало всю ширину и высоту страницы

Примечание: я не использую Bootstrap.

Это компонент целевой страницы

  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
  

Это мой App.js

 const App = () => {
  return (
    <AuthState>
      <ContactState>
        <AlertState>
    
        <Router>
          <Fragment>
            <Navbar />
          
            <div className="container">
              <Alerts />
              <Switch>
              <Route exact path='/landing' component={Landing} />
                <PrivateRoute exact path='/' component={Home} />
                <Route exact path='/about' component={About} />

                <Route exact path='/register' component={Register} />
                <Route exact path='/login' component={Login} />
              </Switch>
            
            </div>
          </Fragment>
        </Router>

        </AlertState>
      </ContactState>
    </AuthState>
  )
}
export default App 
  

Это стиль для целевой страницы.

 .jumbo {
  overflow: hidden;
  color: white;
}
.jumbotron {
  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;
}
  

Я бы хотел, чтобы изображение покрывало всю страницу целиком, поскольку это целевая страница.
Что я делаю не так?

я думаю, что есть класс контейнера, который мешает ему работать. но если я удалю его, это повлияет на все приложение

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

в <div> родительском элементе (где вы хотите добавить фон) добавьте style={} свойство, в style={} do this:

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

вы должны добавить свое фоновое изображение в родительский div jumbotron, потому что ваш 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%;
}