<div class="carousel-item">
      <img src="images/plant2.jpg" class="d-block w-100" alt="plant">
    </div>
    <div class="carousel-item">
      <img src="images/plant3.jpg" class="d-block w-100" alt="plant">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Why is it not working with this css

Either way, if you don't put text within the <div class="bg"></div> then the background image will not show (I checked this in version 4.5).

You will then need to put a fixed height (commented as full height) on the image such as:

height: 50vh;

I also think you have a syntax issue in your css... should it not be

background: url("/PWDMDB/img/poweronbg.jpg")no-repeat center center fixed;

Try the code from out documentation - https://mdbootstrap.com/css/bootstrap-background-image/.

CSS:

body, html {
height: 100%;
}

.bg {
/* The image used */
background-image: url("https://mdbootstrap.com/img/Photos/Horizontal/Nature/full page/img(20).jpg");

/* Full height */
height: 100%;

/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

HTML:

<div class="bg"></div>