React how to set image as background of navbar

Question

i'm using create-react-app and have a navbar that I would like to add a background image to. I have tried a couple different things like add the backgroundImage styling and adding an image tag but have not been able to make it work. The picture I am using is a.jpg and was downloaded from a stock image site. I added the image to my project by dragging it in and adding it to an images folder.

The current path from my header (what I called my navbar) file to my image is../../images/pexels-kai-pilger-1341279.jpg

Here is my header file:

import React from 'react';
import { makeStyles } from '@material-ui/core';
import { ReactComponent as MenuLogo } from '../../images/menu-logo.svg';

const useStyles = makeStyles(theme => {
  return ({
    header: {
      backgroundColor: '#d9d9d9',
      boxShadow: '0rem 0rem 0rem 0.05rem #666666',
      padding: '0rem 1rem 0rem 1rem',
      position: 'relative',
      width: '100vw',
      height: 70,
      zIndex: '100',
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
      backgroundImage: "url('SpaceLogo')"
    },
    headerActive: {
        left: 352,
        backgroundColor: '#d9d9d9',
        boxShadow: '0rem 0rem 0rem 0.05rem #666666',
        padding: '0rem 1rem 0rem 1rem',
        position: 'relative',
        width: '81.7%',

        height: 70,
        zIndex: '100',
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center'
    },
    menuLogo: {
      backgroundColor: '#d9d9d9',
      border: 'none',
      '&:hover': {
        cursor: 'pointer'
      }
    },
  });
});

function Header(props) {
  const { toggleMenu, isMenuOpen } = props;
  const classes = useStyles(props);

  return (
    <div className={ isMenuOpen ? classes.headerActive : classes.header } >
      <button 
        className={classes.menuLogo}
        onClick={() => toggleMenu()}>
        <MenuLogo /> 
      </button>
    </div>
  );
}

export default (Header);

I believe that is the only file that is needed for this question, but I can update if I need to add more info.

If I could get some help on how to get this set up, that would be great.

Bonus question: Is there a way for me to choose what part of the picture is visible in the navbar? For example, the image is a large square but my navbar is a thin rectangle. I would like to use the middle of the image as the background as opposed to the top.

Answer 1

header: {
  backgroundColor: '#d9d9d9',
  boxShadow: '0rem 0rem 0rem 0.05rem #666666',
  padding: '0rem 1rem 0rem 1rem',
  position: 'relative',
  width: '100vw',
  height: 70,
  zIndex: '100',
  display: 'flex',
  justifyContent: 'space-between',
  alignItems: 'center',
  backgroundImage: `url(${SpaceLogo})`
},

This should be work