Как вывести изображение на полноэкранный фон, используя reactJS и css? - PullRequest
Новая
       15

Как вывести изображение на полноэкранный фон, используя reactJS и css?

1 голос
/ 17 апреля 2020

Я пытаюсь добавить фоновое изображение в свой проект приложения реакции. Я хотел бы отобразить изображение на всех страницах, но для каждой страницы изображение не отображается во весь экран, есть пустая область. Вот css для приложения. js

.background-image {
  background-image: url(./assets/space-bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 100%;
  width: 100%;

}

и моего приложения. js выглядит так: 

render() {
    return (
        <Router>
          <Container className="p-0 background-image" fluid={true}>
            <Navbar bg="transparent" expand="lg">
              <Navbar.Brand style={{color: 'white'}} >Schoninger Jimmy</Navbar.Brand>
              <Navbar.Toggle className="border-0" aria-controls="navbar-toggle"/>
              <Navbar.Collapse id="navbar-toggle">
                <Nav className="ml-auto">
                  <Link className="nav-link" to="/"  style={{color: 'white'}} >Home</Link>
                  <Link className="nav-link" to="/about" style={{color: 'white'}}>About</Link>
                  <Link className="nav-link" to="/contact" style={{color: 'white'}}>Contact</Link>
                </Nav>
              </Navbar.Collapse>
            </Navbar>

            <Route path="/" exact render={() => <HomePage title={this.state.home.title} />} />
            <Route path="/about"  render={() => <AboutPage title={this.state.home.title} />} />
            <Route path="/contact"  render={() => <ContactPage title={this.state.home.title} />} />
          </Container>
        </Router>

    );
  }

введите описание изображения здесь

РЕДАКТИРОВАТЬ: я добавил их в css

.background-image {
  background-image: url(./assets/space-bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  height: 100vh; 
  width: 100vw;
  background-position: center; 

}

и теперь фон все еще странный

enter image description here

1 Ответ

0 голосов
/ 18 апреля 2020

Я думаю, этот код стиля CSS может помочь вам: 

.background-image {
    background-image: url(./assets/space-bg.jpg);
    background-size: cover;
    background-position: top;
    min-height: 100%;
    height: 100vh;
    position: relative;
}
...