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!

Vah Run · Answer 1 · 2020-05-10T17:55:47.873

0

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)

edited May 10 '20 at 17:55

answered May 04 '20 at 03:32

Vah Run

11,223
2
11
15

I will update the code to show what are the changes i've made. Sadly, it still isn't working. Now my background image isn't even appearing. – alexholstv May 04 '20 at 15:47
please add the background to show up I have edited my answer to include the image in the css – Vah Run May 05 '20 at 16:11
I have updated the image. I put the line: `background: '../images/background.jpg'` on the first update already, but it still doesn't show anything... – alexholstv May 05 '20 at 18:03
@alexholstv - please check the stackblitz example – Vah Run May 07 '20 at 14:32
The background css isn't loading in the example. Can't really tell if that's gonna work. – alexholstv May 07 '20 at 14:39
also, just realized, I can't put `
` in the navbar since I don't want it to be on all pages that have a navbar.
– alexholstv May 07 '20 at 14:59
I think I'd need to allow the navbar to allow background images or something like that, instead of putting images in a navbar – alexholstv May 07 '20 at 15:05
you can condition that on the page where you load the component – Vah Run May 07 '20 at 19:17
Yeah, I put the nav bar only on the pages I want, but now I need to add the background image only in the homepage. I though of making to separate navbars, one for the home page and one for the rest of the pages, but that's not really efficient. – alexholstv May 08 '20 at 00:34
Could you explain what you meant by "condition that on the page where you load the component"? – alexholstv May 08 '20 at 00:35
I have updated the stackblitz with conditional image render using a flag. @alexholstv – Vah Run May 10 '20 at 00:30
Van Run, still css not loading, but I will still try to use the code to see if maybe it works for me. – alexholstv May 10 '20 at 12:28
@alexholstv you should be able to see the output now - I have forked it – Vah Run May 10 '20 at 17:56
Hey again. Nothing working, the background image isn't loading in the stackblitz example, and when I copy to mine, it doesn't work either. – alexholstv May 12 '20 at 13:03
When I head over to the console on stackblitz, it gives an error something like: "Failed to load image.jpg". So I decided to see if copying the code to my project would work, but no. – alexholstv May 12 '20 at 13:07

score 0 · Answer 2 · answered May 05 '20 at 18:24

0

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.

answered May 05 '20 at 18:24

Luke V

9
2

Hey! I used the import like that: `background-image: url('../images/background.jpg');`, but it's still not working (not loading the image). By the way, thanks for posting an answer! – alexholstv May 05 '20 at 19:07
I think I found something interesting: inspecting element shows that there is a div `div class="img">`. Which makes me think maybe react is only loading the image in the navigation bar area (or it is really the css issue). I don't know really, just to point it out. – alexholstv May 05 '20 at 19:14

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

2 Answers2