Как наложить картинку на картинку в html

Для наложения картинки на картинку в HTML можно использовать абсолютное позиционирование. Для этого необходимо создать контейнер, который будет содержать обе картинки, и применить к этому контейнеру относительное позиционирование. Затем, для каждой картинки нужно задать абсолютное позиционирование и указать координаты ее расположения относительно родительского контейнера. Например:

<div class="container">
  <img src="image1.jpg" class="image image1" />
  <img src="image2.jpg" class="image image2" />
</div>

.container {
  position: relative;
}

.image {
  width: 300px;
  height: 200px;
}

.image1 {
  position: absolute;
  top: 0;
  left: 0;
}

.image2 {
  position: absolute;
  top: 0;
  left: 0;
}

В данном примере изображения с размерами 300x200 будут распологаться одна над другой.

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