Как сделать картинку внутри картинки css

Сделать картинку внутри картинки в CSS можно, используя свойство background-image и позиционирование фонового изображения.

1. Установка основного изображения Сначала необходимо установить основное изображение как фоновое изображение элемента.

div {
  background-image: url('main-image.jpg');
  background-size: cover;
}

2. Добавление изображения внутри основного Чтобы добавить внутреннее изображение, необходимо добавить еще одно свойство background-image и определить его позицию с помощью background-position.

div {
  background-image: url('main-image.jpg'),
                    url('inner-image.jpg');
  background-size: cover, auto;
  background-position: center center, 50% 50%;
  background-repeat: no-repeat, no-repeat;
}

В этом примере мы задаем два фоновых изображения: основное — ‘main-image.jpg’ и внутреннее — ‘inner-image.jpg’. Основное изображение настраивается на автоматическое заполнение элемента и позиционируется по центру. Внутреннее изображение настраивается на свой размер и позиционируется на 50% по горизонтали и вертикали. Оба изображения не повторяются в элементе.

3. Установка размеров внутреннего изображения Если размеры внутреннего изображения известны и они меньше размеров основного изображения, то можно использовать background-size для изменения размеров фоновых изображений.

div {
  background-image: url('main-image.jpg'),
                    url('inner-image.jpg');
  background-size: cover, 200px;
  background-position: center center, 50% 50%;
  background-repeat: no-repeat, no-repeat;
}

В этом примере мы задали размеры внутреннего изображения 200px, задав background-size второго изображения со значением 200px.

В итоге мы получаем внутреннее изображение, которое находится внутри основного изображения, и его позиция может быть настроена в зависимости от требований дизайна.