Как переместить изображение в css

Чтобы переместить изображение в CSS, можно использовать свойство position.

Пример: чтобы переместить изображение в верхний в правый угол, можно использовать следующий код:

<div class="border">
     <img src="https://sun9-73.userapi.com/impg/NmxMJOd4GB-1Sz7KDWoqFcYUmh_GW0fNuuvhBg/63l7JqlPI_w.jpg?size=297x302&quality=96&sign=0506d2cf6851949c125a7c50bd0c01a3&type=album">
</div>

body{
  margin: 0;
  padding: 0;
}

.border{
  /* сделаем рамку контейнера чтобы увидеть перемещение картинки в нем  */
  border: 2px solid #ff0;
  height: 600px;
}

img{
  position: absolute;
  width: 200px;
  height: auto;
  top: 0px;
  right: 0px;
}

В примере данная картинка переместилась в верхний угол вправо. Чтобы переместить картинку в другое место нужно поменять всего лишь свойство top и right или добавить свойства bottom и left

Для перемещения изображения можно использовать свойство background-position. Это свойство позволяет задать позицию фона внутри элемента. Например, можно переместить изображение вправо или вниз относительно границы элемента:

.element {
    background-image: url('путь_к_изображению.jpg'); /* Путь к вашему изображению */
    background-position: 50px 20px; /* Смещение изображения на 50px вправо и 20px вниз относительно верхнего левого угла элемента */
    background-repeat: no-repeat; /* Запрет на повторение изображения */
    width: 300px; /* Ширина элемента */
    height: 200px; /* Высота элемента */
}

Можно использовать ключевые слова для описания позиции, например center, bottom, right и т.д. Например:

.element {
    background-position: center bottom; /* Позиционирование изображения по центру внизу элемента */
}

Значения можно задавать в процентах:

.element {
    background-position: 50% 50%; /* Позиция на 50% от ширины и высоты элемента */
}