Html – Cannot make a div transparent in react

I’m trying to use a custom BackgroundImage component and a custom TextDiv component:

// BackgroundImage.js

import background_png from './background.png';
import React from 'react';
import './BackgroundImage.css'; 

const BackgroundImage = (props) => {
  return (
    <div className='bg'></div>
  );
};

export default BackgroundImage;

/* BackgroundImage.css */

  .bg{
    background: url(background.png);
    min-height: 500px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

// TextDiv.js

import React from 'react';
import './TextDiv.css'; 

function TextDiv ({ children })  {
  return (
    <>
      <div id='TextDiv'>
        {children}
      </div>
    </>
  );
};

export default TextDiv;

/* TextDiv.css */

#TextDiv {
  background: rgba(0,0,0, 0.0); 
  position: relative;
  font-size: large;
  color: white; 
  z-index: 2; 
}

import React, { useState } from 'react';
import Navbar from '../navbar/navbar'; // Import the Navbar component
import './A1.css'; 
import BackgroundImage from '../backgroundImage/BackgroundImage';
import wolfmoon2 from '../../images/wolfmoon2.png';
import TextDiv from '../textDiv/textDiv';

function A1() {

  return (


    <div id="A1">
      <>
      
{/************************************************************* 

                          A     11
                        A   A    1   
                        A   A    1   
                        AAAAA    1   
                        A   A    1

***************************************************************/}
        
        <Navbar /> 
        <BackgroundImage />


<div id='test'>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque consectetur sed nunc nec consequat. Vivamus in erat urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam at scelerisque nisi, ac maximus nibh. Maecenas in purus id felis porttitor suscipit. Vivamus viverra cursus massa, quis euismod odio. Mauris suscipit risus sem, eget hendrerit ligula fringilla a. Curabitur consectetur ut ante eu pellentesque. Praesent et molestie augue. Nulla auctor, ante at pellentesque vehicula, ex arcu viverra ligula, in facilisis arcu nibh vitae leo. Ut ac ullamcorper purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla eu nibh sollicitudin, consectetur mauris vel, ultricies libero. Sed ornare porttitor nibh, eget vulputate elit rutrum eu. Integer finibus arcu ipsum, sed varius libero hendrerit quis.

  Aenean id augue ipsum. Aliquam et tristique est. Quisque cursus imperdiet placerat. Fusce ut tempor risus. Curabitur vitae mauris at velit pellentesque blandit eget ut purus. Nulla volutpat egestas lobortis. Duis sodales tincidunt nunc, nec facilisis nisi facilisis vitae. Ut quis gravida tortor. Vestibulum aliquet lobortis lectus vel venenatis. Nulla facilisi. Integer rhoncus lacinia nibh, ac vehicula quam euismod in. Sed id tortor quis nulla ullamcorper lobortis eu vitae diam. Fusce eget elit eu ante venenatis accumsan. Phasellus lobortis dictum nunc, vitae iaculis diam fringilla id. Nam varius rhoncus magna ac gravida.

  Morbi in ipsum at diam ultrices pulvinar id sed est. Etiam vel dapibus turpis, sed accumsan massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras mi ipsum, dignissim ac dolor ac, rhoncus dapibus enim. Ut volutpat orci a eros congue, eu varius enim molestie. Quisque non risus in felis convallis eleifend sit amet vel nisi. Morbi semper erat ut sagittis consectetur. Maecenas ex lorem, finibus id arcu non, blandit efficitur nunc. Fusce aliquam eros nunc, non placerat nunc egestas in. Curabitur bibendum posuere eros semper egestas. Sed vulputate, velit et blandit volutpat, quam quam vulputate nisi, rhoncus tempor tortor odio non massa. Proin finibus fringilla sodales.

  Quisque accumsan ligula metus, et congue tellus rhoncus et. Nunc elementum odio vel justo porta tincidunt. Curabitur et venenatis lectus, in elementum est. Nam elementum orci nec nibh sodales congue. Proin pharetra facilisis dapibus. Quisque dignissim odio sit amet ligula tincidunt suscipit. Nam fermentum rhoncus leo sed pretium. Aliquam id dolor consequat, consequat orci vitae, laoreet ipsum. Nullam lobortis dolor nec sem rutrum molestie in vel felis. Quisque congue cursus dui.

  Donec at ligula eu augue auctor sodales quis in lacus. Vestibulum ullamcorper consequat dolor ac dignissim. Vivamus euismod nisl nec velit dapibus, in sodales nibh vestibulum. Sed at leo in purus rutrum convallis. Duis porttitor elementum libero, vitae faucibus dolor volutpat eget. Nam maximus vel eros eu sodales. Nunc tincidunt vel sapien at eleifend. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Suspendisse potenti. 
</div>

        <TextDiv>
    
        </TextDiv>
      </>
    </div>
  );
}

export default A1;

/* A1.css */
#test{
  background: rgba(0,0,0, 0.0); 
  position: relative;
  font-size: large;
  color: white; 
  z-index: 2; 
}

All I want to do is make the TextDiv transparent to show the background image as the user is scrolling. I’ve tried setting background and background-color to rgba(0,0,0,0) and opacity to zero. I’ve tried just using background:transparent. I’ve even tried every combination of these values on all of my components and all I get is a blank white div that covers the image. I even tried just using a plain old div but nothing seems to work. I’ve disabled all the other css including App.css and index.css. Is react adding something in that I’m missing? It seems like it wants to put a white background element beneath my divs because opacity 0.5 makes it grey and 0 makes it white. chatgpt can’t figure this out, maybe you guys can.

—edit—

<head>
    <meta charset="utf-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="#000000">
    <meta name="description" content="Web site created using create-react-app">
    <link rel="apple-touch-icon" href="/logo192.png">
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="/manifest.json">
    <!--
      Notice the use of  in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  <script defer="" src="/static/js/bundle.js"></script><style>
.navbarWrapper{
  position:fixed;
  width:100%;
  z-index: 99;
  /* border:1px solid blue; */
}

.navbar {
  background-color: rgba(0,0,0,0);
  position: relative;
  font-size: large;
  color:white;
  padding-left: 12%;
  
}

.navbar a{
  display:inline-block;
  width:25%;
  opacity: 1;
  color:white;
  opacity:1.0;
}

@media screen and (max-width: 500px) {
    .navbar a {
      float: none;
      display: block;
      width: 100%;
      text-align: left; 
    }
  }
  
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8uL3NyYy9jb21wb25lbnRzL25hdmJhci9OYXZiYXJUcmFuc3BhcmVudC5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUNBO0VBQ0UsY0FBYztFQUNkLFVBQVU7RUFDVixXQUFXO0VBQ1gsMkJBQTJCO0FBQzdCOztBQUVBO0VBQ0UsK0JBQStCO0VBQy9CLGtCQUFrQjtFQUNsQixnQkFBZ0I7RUFDaEIsV0FBVztFQUNYLGlCQUFpQjs7QUFFbkI7O0FBRUE7RUFDRSxvQkFBb0I7RUFDcEIsU0FBUztFQUNULFVBQVU7RUFDVixXQUFXO0VBQ1gsV0FBVztBQUNiOztBQUVBO0lBQ0k7TUFDRSxXQUFXO01BQ1gsY0FBYztNQUNkLFdBQVc7TUFDWCxnQkFBZ0I7SUFDbEI7RUFDRiIsInNvdXJjZXNDb250ZW50IjpbIlxuLm5hdmJhcldyYXBwZXJ7XG4gIHBvc2l0aW9uOmZpeGVkO1xuICB3aWR0aDoxMDAlO1xuICB6LWluZGV4OiA5OTtcbiAgLyogYm9yZGVyOjFweCBzb2xpZCBibHVlOyAqL1xufVxuXG4ubmF2YmFyIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogcmdiYSgwLDAsMCwwKTtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBmb250LXNpemU6IGxhcmdlO1xuICBjb2xvcjp3aGl0ZTtcbiAgcGFkZGluZy1sZWZ0OiAxMiU7XG4gIFxufVxuXG4ubmF2YmFyIGF7XG4gIGRpc3BsYXk6aW5saW5lLWJsb2NrO1xuICB3aWR0aDoyNSU7XG4gIG9wYWNpdHk6IDE7XG4gIGNvbG9yOndoaXRlO1xuICBvcGFjaXR5OjEuMDtcbn1cblxuQG1lZGlhIHNjcmVlbiBhbmQgKG1heC13aWR0aDogNTAwcHgpIHtcbiAgICAubmF2YmFyIGEge1xuICAgICAgZmxvYXQ6IG5vbmU7XG4gICAgICBkaXNwbGF5OiBibG9jaztcbiAgICAgIHdpZHRoOiAxMDAlO1xuICAgICAgdGV4dC1hbGlnbjogbGVmdDsgXG4gICAgfVxuICB9XG4gICJdLCJzb3VyY2VSb290IjoiIn0= */</style><style>/* A1.css */
#test{
  background: rgba(0,0,0, 0.0); 
  position: relative;
  font-size: large;
  color: white; 
  z-index: 2; 
}


/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8uL3NyYy9jb21wb25lbnRzL0ExL0ExLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxXQUFXO0FBQ1g7RUFDRSw0QkFBNEI7RUFDNUIsa0JBQWtCO0VBQ2xCLGdCQUFnQjtFQUNoQixZQUFZO0VBQ1osVUFBVTtBQUNaIiwic291cmNlc0NvbnRlbnQiOlsiLyogQTEuY3NzICovXG4jdGVzdHtcbiAgYmFja2dyb3VuZDogcmdiYSgwLDAsMCwgMC4wKTsgXG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgZm9udC1zaXplOiBsYXJnZTtcbiAgY29sb3I6IHdoaXRlOyBcbiAgei1pbmRleDogMjsgXG59XG5cbiJdLCJzb3VyY2VSb290IjoiIn0= */</style><style>/* BackgroundImage.css */

/* .bg{
  background-image: url('background.png');
  min-height: 500px;
  width: 100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
} */



  .bg{
    background: url(http://localhost:3000/static/media/background.7f75e49c5888069314c8.png);
    min-height: 500px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color:white;
  }
  

  .background-wrapper {
    position: relative;
    width: 100%;
    height: 500vh; 
    overflow: hidden;
    perspective: 1px;
  }
  
  .background-image {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translateZ(-1px) scale(1.5);

  }
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8uL3NyYy9jb21wb25lbnRzL2JhY2tncm91bmRJbWFnZS9CYWNrZ3JvdW5kSW1hZ2UuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLHdCQUF3Qjs7QUFFeEI7Ozs7Ozs7OztHQVNHOzs7O0VBSUQ7SUFDRSxtREFBK0I7SUFDL0IsaUJBQWlCO0lBQ2pCLDRCQUE0QjtJQUM1QiwyQkFBMkI7SUFDM0IsNEJBQTRCO0lBQzVCLHNCQUFzQjtJQUN0QixXQUFXO0VBQ2I7OztFQUdBO0lBQ0Usa0JBQWtCO0lBQ2xCLFdBQVc7SUFDWCxhQUFhO0lBQ2IsZ0JBQWdCO0lBQ2hCLGdCQUFnQjtFQUNsQjs7RUFFQTtJQUNFLFVBQVU7SUFDVixrQkFBa0I7SUFDbEIsTUFBTTtJQUNOLE9BQU87SUFDUCxXQUFXO0lBQ1gsWUFBWTtJQUNaLGlCQUFpQjtJQUNqQixzQ0FBc0M7O0VBRXhDIiwic291cmNlc0NvbnRlbnQiOlsiLyogQmFja2dyb3VuZEltYWdlLmNzcyAqL1xuXG4vKiAuYmd7XG4gIGJhY2tncm91bmQtaW1hZ2U6IHVybCgnYmFja2dyb3VuZC5wbmcnKTtcbiAgbWluLWhlaWdodDogNTAwcHg7XG4gIHdpZHRoOiAxMDAlO1xuICBiYWNrZ3JvdW5kLWF0dGFjaG1lbnQ6IGZpeGVkO1xuICBiYWNrZ3JvdW5kLXBvc2l0aW9uOiBjZW50ZXI7XG4gIGJhY2tncm91bmQtcmVwZWF0OiBuby1yZXBlYXQ7XG4gIGJhY2tncm91bmQtc2l6ZTogY292ZXI7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbn0gKi9cblxuXG5cbiAgLmJne1xuICAgIGJhY2tncm91bmQ6IHVybChiYWNrZ3JvdW5kLnBuZyk7XG4gICAgbWluLWhlaWdodDogNTAwcHg7XG4gICAgYmFja2dyb3VuZC1hdHRhY2htZW50OiBmaXhlZDtcbiAgICBiYWNrZ3JvdW5kLXBvc2l0aW9uOiBjZW50ZXI7XG4gICAgYmFja2dyb3VuZC1yZXBlYXQ6IG5vLXJlcGVhdDtcbiAgICBiYWNrZ3JvdW5kLXNpemU6IGNvdmVyO1xuICAgIGNvbG9yOndoaXRlO1xuICB9XG4gIFxuXG4gIC5iYWNrZ3JvdW5kLXdyYXBwZXIge1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICB3aWR0aDogMTAwJTtcbiAgICBoZWlnaHQ6IDUwMHZoOyBcbiAgICBvdmVyZmxvdzogaGlkZGVuO1xuICAgIHBlcnNwZWN0aXZlOiAxcHg7XG4gIH1cbiAgXG4gIC5iYWNrZ3JvdW5kLWltYWdlIHtcbiAgICB6LWluZGV4OiAxO1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICB0b3A6IDA7XG4gICAgbGVmdDogMDtcbiAgICB3aWR0aDogMTAwJTtcbiAgICBoZWlnaHQ6IDEwMCU7XG4gICAgb2JqZWN0LWZpdDogY292ZXI7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVaKC0xcHgpIHNjYWxlKDEuNSk7XG5cbiAgfSJdLCJzb3VyY2VSb290IjoiIn0= */</style><style>/* TextDiv.css */

/* #TextDiv {
  background: rgba(0,0,0, 0.0); 
  position: relative;
  font-size: large;
  color: white; 
  z-index: 2; 
} */


#TextDiv {
  background-color: rgba(0,0,0,0.5);
  height: 100%;
  padding: 1rem;
  color: #ccc;
}



/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8uL3NyYy9jb21wb25lbnRzL3RleHREaXYvVGV4dERpdi5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsZ0JBQWdCOztBQUVoQjs7Ozs7O0dBTUc7OztBQUdIO0VBQ0UsaUNBQWlDO0VBQ2pDLFlBQVk7RUFDWixhQUFhO0VBQ2IsV0FBVztBQUNiIiwic291cmNlc0NvbnRlbnQiOlsiLyogVGV4dERpdi5jc3MgKi9cblxuLyogI1RleHREaXYge1xuICBiYWNrZ3JvdW5kOiByZ2JhKDAsMCwwLCAwLjApOyBcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBmb250LXNpemU6IGxhcmdlO1xuICBjb2xvcjogd2hpdGU7IFxuICB6LWluZGV4OiAyOyBcbn0gKi9cblxuXG4jVGV4dERpdiB7XG4gIGJhY2tncm91bmQtY29sb3I6IHJnYmEoMCwwLDAsMC41KTtcbiAgaGVpZ2h0OiAxMDAlO1xuICBwYWRkaW5nOiAxcmVtO1xuICBjb2xvcjogI2NjYztcbn1cblxuXG4iXSwic291cmNlUm9vdCI6IiJ9 */</style></head>

Is this what you wanted to see, David? I copied from the inspector.

I’ve also implemented Deepak’s suggestions. Putting children in the BackgroundImage does give me what I want but I don’t want to sacrifice modularity. However, I think a nice solution might be to just remake A1 with with background image passed in as a prop. Still kind of annoyed that I can’t make a transparent component but good enough.

Thanks guys.