Как переместить изображение в 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>

В примере данная картинка переместилась в верхний угол вправо. Чтобы переместить картинку в другое место нужно поменять всего лишь свойство 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% от ширины и высоты элемента */
}

Способ зависит от того, куда нужно переместить картинку.

По центру блока

.wrapper {
  display: flex;
  justify-content: center;  /* по горизонтали */
  align-items: center;      /* по вертикали */
  height: 300px;
}

Только по горизонтали, без flex: img { display: block; margin: 0 auto; }.

Вправо или влево

.wrapper {
  display: flex;
  justify-content: flex-end;  /* вправо */
}

Обтекание текстом — float: left или float: right у картинки.

В угол блока

.card {
  position: relative;
}

.card img {
  position: absolute;
  top: 10px;
  right: 10px;
}

position: absolute отсчитывает координаты от ближайшего родителя с position: relative. Без него картинка встанет относительно всей страницы.

Сдвинуть на несколько пикселей

img {
  position: relative;
  top: 10px;
  left: 20px;
}

Картинка сдвинется, а место под ней в потоке останется. То же делает transform: translate(20px, 10px) — так удобнее для анимации.

Фоновая картинка

Если изображение задано через background-image, его положение задаёт background-position:

.banner {
  background-image: url("photo.jpg");
  background-position: right bottom;
  background-repeat: no-repeat;
}

Обрезанная картинка внутри рамки

object-position двигает изображение внутри тега <img>, когда оно обрезано через object-fit:

img {
  width: 300px;
  height: 200px;
  object-fit: cover;
  object-position: top;  /* показать верхнюю часть фото */
}

Позиционирование и flexbox разбирают в курсе «Профессиональная вёрстка».