Как наложить изображение на кастомную карусель?

Question

У меня есть заказная карусель от здесь .Я хотел бы наложить изображение в верхнем левом углу карусели.

Я искал все, но ничего не работает с моей каруселью, потому что она всегда деформирует ее.

    <!-- Carousel -->
    <header>
                <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                  <ol class="carousel-indicators">
                    <li data-target="#carouselExampleIndicators" data-target="#mycarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#carouselExampleIndicators" data-target="#mycarousel" data-slide-to="1"></li>
                    <li data-target="#carouselExampleIndicators" data-target="#mycarousel" data-slide-to="2"></li>
                  </ol>
                  <div class="carousel-inner" role="listbox">
                    <!-- Slide One - Set the background image for this slide in the line below -->
                    <div class="carousel-item active" style="background-image: url('images/c1.jpg')">
                      <div class="carousel-caption d-none d-md-block">
                        <h2 class="display-4">First Slide</h2>
                        <p class="lead">This is a description for the first slide.</p>
                      </div>
                    </div>
                    <!-- Slide Two - Set the background image for this slide in the line below -->
                    <div class="carousel-item" style="background-image: url('images/c2.jpg')">
                      <div class="carousel-caption d-none d-md-block">
                        <h2 class="display-4">Second Slide</h2>
                        <p class="lead">This is a description for the second slide.</p>
                      </div>
                    </div>
                    <!-- Slide Three - Set the background image for this slide in the line below -->
                    <div class="carousel-item" style="background-image: url('images/c3.jpg')">
                      <div class="carousel-caption d-none d-md-block">
                        <h2 class="display-4">Third Slide</h2>
                        <p class="lead">This is a description for the third slide.</p>
                      </div>
                    </div>
                  </div>
                  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                      </a>
                  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                      </a>
                </div>
              </header>

    <div class="logo">
                    <img src="images/logo.png">
                </div>

    /* css */
    .carousel-item {
        height: 100vh;
        min-height: 350px;
        background: no-repeat center center scroll;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
      }

    #logo{
        position: absolute;
        top: 0;
        left: 0;
    }

Изображение просто идет под каруселью, вместо наложения.

jfiddle

Answer 1

Ни один родительский элемент не расположен должным образом (относительно). Оберните код в контейнер и разместите контейнер относительно него, и тогда div (дочерний элемент оболочки) с изображением внутри него будет действовать соответствующим образом. Или вставьте div в заголовок, чтобы логотип div был дочерним для заголовка.

Answer 2

Логотип - это класс в вашем HTML-коде, а в CSS он выбран как ID

Итак, код будет:

.logo {
    .....
}

вместо

#logo {
    .....
}