Black bars appearingwhen moving image in CSS

I started using HTML/CSS, JS about a week ago and have ran into a slight problem. Im using the bootstrap carousel and its working great however when i try to move the image more to the top, i end up getting black bars on the bottom, its like something is automatically cropping my images.

When I adjust "bottom" to 50px, i get those black bars, but my intention is to just shift the image up. its a full image so i am 100% sure there is stuff below there. Anyone know whats going on?

  #img1 {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  opacity: 0.5;

<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
  <ol class="carousel-indicators">
    <li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
    <li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <div class="overlay-image" id="img1" style="background-image:url(./images/madeira3.JPEG);"></div>
      <div class="container">

The problem you are encountering is because you are moving the element that displays the image up.

You have your image set as a background image, so you could use background attributes to position the image.

Doing something like this may help:

https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

This will position the image centre both horizontally and vertically

#img1 {
    background-size:cover;
    background-position:center center;
}

This will position the image horizontally centre and vertically top

#img1 {
    background-size:cover;
    background-position:center top;
}

You can also add pixel values, say you want the top 50pixels always trimmed off,

#img1 {
    background-size:cover;
    background-position:center -50px;
}