Trouble displaying text over background image in React.js - reactjs

Question

I want to display text over this background image using React.js. Not sure if I am missing code in my App.js file? or css file?
this is what I have in my App.js file so far:
import React from 'react';
import '../styles/App.css';
const App = () => {
return (
<div id="port">
<div id="name">
<p>Nicole M. Cuellar</p>
</div>
</div>
);
}
this is in my css file:
#port {
background-image: url('../images/largebulb.jpg');
background-size: cover;
background-position: center center;
position: relative;
top: 0;
bottom: 0;
height: 100vh;
z-index: -10;
}
#name {
font-family: 'Cinzel', serif;
font-size: 45px;
display: flex;
left: 0;
line-height: 200px;
margin-top: -100px;
position: absolute;
text-align: center;
top: 50%;
width: 100%;
z-index: -40;
}

Answer 1

You have a CSS issue, this isn't a node issue. I've attached some quick direction for thought.
#port {
z-index: -10;
height: 100vh;
background-image: url('https://images.unsplash.com/photo-1568050231220-41aae5663af6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80');
background-size: cover;
background-position: center center;
position: relative;
}
#name {
position: absolute;
font-size: 45px;
margin: 0;
padding: 0;
top: 50%;
left: 50%;
color: white;
transform: translate(-50%, -50%);
font-family: 'Cinzel', serif;
white-space: nowrap;
}
<div id="port">
<div id="name">
<p>Nicole M. Cuellar</p>
</div>
</div>