How could I put my background image behind a Navbar in react?

Question

I'm trying to put a background image behind my Navbar in react. The end result should look something like this: https://www.salient.com/ . I've tried setting the navbar background to be none and transparent , both resulting with it not working. I also tried putting my background image and my navbar in one div, but they are still separated.

This is my main App.js file:

class App extends Component {
  render() {
    return (
      <React.Fragment>
        <Router>
          <NavigationBar />
          <Switch>
              <Route exact path="/" component={Home} />
              <Route path="/projects" component={Projects} />
              <Route path="/contact" component={Contact} />
          </Switch>
        </Router>
      </React.Fragment>
    );
  }
}

export default App;

And this is my Home.js (I use App.js for stuff that I want to be on all pages, and separate files like Home.js or Project.js for specific pages, pretty new to react so im new to all of this):

class Home extends Component {
    render() {
        return (
            <div>
                (putting an image here puts the image under the nav bar, not as a background image)
            </div>
        );
    }
}

export default Home;

This is the Navbar ("NavigationBar"):

export const NavigationBar = () => (
    <Styles>
        <nav class="navbar navbar-light navbar-dark imageWrapper">
            <ul class="links">
                <li>
                    <a class="nav-link" href="/">Home</a>
                </li>
                <li>
                    <a class="nav-link" href="/projects">Projects</a>
                </li>
                <li>
                    <a class="nav-link" href="/contact">Contact</a>
                </li>
            </ul>
        </nav>
    </Styles>
)

Currently, my react app looks like this .

Any sort help/advice is very much appreciated!

Answer 1

Use these styles to your image and its wrapped div tag. It should make it position to the top You need to make sure that the Image is inside the nav component to position it accordingly.

<nav class="navbar navbar-light navbar-dark imageWrapper">
            <ul class="links">
                <li>
                    <a class="nav-link" href="/">Home</a>
                </li>
                <li>
                    <a class="nav-link" href="/projects">Projects</a>
                </li>
                <li>
                    <a class="nav-link" href="/contact">Contact</a>
                </li>
            </ul>
            <div className="img"></div>
        </nav>


nav.imageWrapper{
    position: relative
}

nav.imageWrapper div.img { position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    max-height: 70vh;
    background-size: cover;
background: url('../images/background.jpg');
z-index: -1
}

https://stackblitz.com/edit/react-kliqc3?file=index.js (check this example)

Answer 2

Local image imports work somewhat differently in React due to how it's bundled. The image here may not be loading correctly. I would recommend changing the import to look like this:

nav.imageWrapper div.img { 
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  max-height: 70vh;
  background-size: cover;
  background-image: url('../images/background.jpg'); //replace background, wrap in URL reference
}

If you're having trouble importing images directly too you can read more at this discussion .