Как сделать чтобы картинка не повторялась css

Изучим как с помощью CSS избежать повторного отображения картинок. Для этого мы используем свойство background-repeat: no-repeat, которое позволяет запретить повторение картинки по горизонтали или по вертикали.

Одним из способов избежать повторения картинки в CSS является использование свойства background-size. Данное свойство позволяет настроить размеры изображения, заданного с помощью свойства background-image. Это свойство может принимать два значения: размер в пикселях, а также значение «cover» или «contain».

Значение «cover»

Значение «cover» во многом похоже на значение «contain», но в некоторых случаях оно может отличаться. Оно позволяет подстраивать изображение под размеры контейнера. Это означает, что изображение будет масштабироваться и подстраиваться под рамки контейнера, при этом оно не будет повторяться или обрезаться. Также стоит отметить, что изображение будет пропорционально уменьшаться или увеличиваться, пока не заполнит весь контейнер.

.my-container {
    background-image: url("my-image.jpg");
    background-size: cover;
}

Значение «contain»

Значение «contain» позволяет изображению поместиться в контейнер, при этом оно будет пропорционально уменьшаться или увеличиваться, чтобы поместиться в него. Это значение будет применяться, если изображение больше размеров контейнера. Таким образом, изображение будет пропорционально уменьшаться и помещаться в контейнер без повторений и обрезки.

.my-container {
    background-image: url("my-image.jpg");
    background-size: contain;
}

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