CODEWITHSUNDEEP
cssreactjsreact-router
Sunmo An
Sunmo An

Reputation: 55

React: background image overlaps navbar

Hi I am developing a react project. In App.js,

return (
  <HashRouter>
    <Route path="/about" component={About} />
    <Navigation />
  </HashRouter>
);

and I added an background image in about.js

.background {
  background-image: url('../source/loyoalfree.jpg');
  /* Full height */
  height: 100%; 

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

Then I could still see the navbar
but can not click the navbar any more.
I think the background image covers the navbar.
How can I solve this?

Upvotes: 0

Views: 1064

Answers (1)

Axblert
Axblert

Reputation: 576

You should add a z-index to your image.

.image { 
  position: relative;
  z-index: -1;
  /* your remaining css*/
}

Upvotes: 2

Related Questions