Разница между значениями cover и contain при работе с фоновыми изображениями заключается в том, как происходит масштабирование картинки в зависимости от выбранного значения свойства background-size: 14

1. Cover указывает, что фоновое изображение будет изменено так, чтобы полностью закрыть ширину и высоту элемента. 1 Исходное соотношение сторон фоновой картинки сохраняется, но изображение растягивается или сжимается по мере необходимости, чтобы охватить элемент целиком. 1 Часто при использовании значения cover часть фонового изображения обрезается. 1
2. Contain указывает, что фоновое изображение будет изменено так, чтобы целиком вписаться в ширину и высоту элемента. 1 При этом исходное соотношение сторон фонового изображения сохраняется, но картинка растягивается или сжимается по мере необходимости, чтобы остаться в пределах ширины и высоты элемента. 1 В отличие от cover, ключевое слово contain всегда показывает полное фоновое изображение, при этом зачастую оно не будет занимать всю доступную площадь элемента. 1

Значения cover и contain могут привести к небольшим искажениям фоновых изображений, особенно, когда картинка растягивается за пределами своих исходных размеров. 1