React and Mui, background is missing on component in one location, same implement

React 16 - functional components w hooks

Mui 4 -

We have a few different login pages and i am adding a simple background pattern to the page behind the login. easy peas right?

here is what one login page component returns

  return (
    <Box width={1} height={1}>
      <Box style={{backgroundImage: "url('images/logoBlack.png')", backgroundSize: "cover", opacity: ".10", width: "100%", height: "100%", position: "absolute"}} />
      <Box style={{position: "relative"}} pt={10}>
        {thing1.success
          ? <Box pb={30}>
            <thingOne />
          </Box>
          : <Box pb={30}>
            <thingTwo />
          </Box>
        }
      </Box>
    </Box>
  );

in one of my main password routes i have a similar component, which i've done a similar implement on. i couldnt get the image to render in the other location. after messing around w different imports i decided to try the known good/working component. when i placed it on the other route, it too stopped rendering the image.

i literally switched the route where the image didnt render to the component that was working, and it stopped working on that route.

no errors in console, no failed to import messages. even the css props in the inspector show the same exact line of text next to background-image. i just dont see it anythwere. have tried peeling back layer on the inspector, messing w position, etc, you never see the image on the "bad" route.

both routes are in the main App.js component, both done the same way. both are public only, same configs..scratching my head here

any ideas on where to start.

my gut is telling me maybe MUI bug, or possible how we have it all bundled/webpack