CODEWITHSUNDEEP
javascripthtmlcssreactjsreact-bootstrap
Jimjim
Jimjim

Reputation: 141

How to display an image in full screen background using reactJS and css?

I am trying to add a background image to my react app project. I would like to display the image in all pages but for every page the image is not displayed in full screen there is a blank area. Here is the css for the App.js

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

}

and my App.js is like :

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>

    );
  }

enter image description here

EDIT: i added these to the 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; 

}

and now the background is still weird

enter image description here

Upvotes: 4

Views: 11504

Answers (1)

Idin Khayami
Idin Khayami

Reputation: 252

I think this CSS style code can help you:

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

Upvotes: 6

Related Questions