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

Аватар пользователя Ivan Gagarinov
Ivan Gagarinov
16 июля 2024

Для изменения положения картинки в CSS можно использовать свойство background-position или свойство position в сочетании со свойствами top, bottom, left, right.

Пример изменения положения картинки с использованием background-position:

HTML:

<div class="image"></div>

CSS:

.image {
    width: 200px;
    height: 200px;
    background-image: url('путь_к_картинке.jpg');
    background-size: cover; /* растягиваем картинку на всю площадь */
    background-position: center; /* центрируем картинку */
}

В этом примере картинка будет центрирована внутри блока .image. Можно изменить значение свойства background-position на top, bottom, left, right или комбинировать их для получения нужного положения картинки.

Если вы хотите переместить сам элемент с изображением, то можно использовать свойство position в сочетании с top, bottom, left, right.

0 0

Похожие вопросы