Adding image logo to bootstrap carousel-CodePudding

As I try to add a logo image to the carousel, I have a hard time making sure the logo remains stationary at all times without moving inside the carousel.

<!--logo-->
<div >
    <img src="Aaron Murillo-Black.png" >
</div>
<!--Carousel image slider-->
<div id="carouselExampleControls"  data-bs-ride="carousel">
    <div >
        <div >
            <img src="Aaron Murillo-Black.png"  alt="Web Site Logo">
        </div>
        <div >
            <img src="Dress.jpg"  alt="Dress">
        </div>
        <div >
            <img src="Balloon.jpg"  alt="Balloon Fiesta">
        </div>
        <div >
            <img src="DarkChurch.jpg"  alt="Dark Church">
        </div>
        <div >
            <img src="River Falls.jpg"  alt="River Cave">
        </div>
        <div >
            <img src="Wedding.jpg"  alt="Couples">
        </div>
    </div>
    <button  type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
        <span  aria-hidden="true"></span>
        <span >Previous</span>
    </button>
    <button  type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
        <span  aria-hidden="true"></span>
        <span >Next</span>
    </button>
</div>

all my css with this had been a bust.

.logo-image{
    width: 10%;
    height: 100px;
    border-radius: 10%;
    overflow: hidden;
    margin: auto;
    position: relative;
}

CodePudding user response：

Well, if I'm not getting you wrong you want to make the logo stationary and not moving as the carousel moves ? You could do this in the CSS, by:

Giving the carousel a position of relative and the logo that of absolute

CodePudding user response：

Wrap all your code with div and make it relative then make .logo-image absolute, it will make your logo remain still

.wrap {
  position: relative;
}
.logo-image {
  position: absolute;
  top: 0;
  left: 0;
}

<div >
  <!--logo-->
  <div >
      <img src="Aaron Murillo-Black.png" >
  </div>
  <!--Carousel image slider-->
  <div id="carouselExampleControls"  data-bs-ride="carousel">
      <div >
          <div >
              <img src="Aaron Murillo-Black.png"  alt="Web Site Logo">
          </div>
          <div >
              <img src="Dress.jpg"  alt="Dress">
          </div>
          <div >
              <img src="Balloon.jpg"  alt="Balloon Fiesta">
          </div>
          <div >
              <img src="DarkChurch.jpg"  alt="Dark Church">
          </div>
          <div >
              <img src="River Falls.jpg"  alt="River Cave">
          </div>
          <div >
              <img src="Wedding.jpg"  alt="Couples">
          </div>
      </div>
      <button  type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
          <span  aria-hidden="true"></span>
          <span >Previous</span>
      </button>
      <button  type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
          <span  aria-hidden="true"></span>
          <span >Next</span>
      </button>
  </div>
</div>