background size 에 대해

auto : Default 값, 원본 이미지의 크기를 유지하며, 이미지가 요소보다 크면 자동으로 축소되고, 작으면 확대됩니다.

왜곡이 발생할 수 있습니다

 

px px  : 너비, 높이의 크기를 지정합니다. 이미지가 해당 크기로 고정됩니다. 원본 이미지와 크기가 다르면 왜곡이 발생합니다. 

 

px : 너비만 크기를 지정하며, 높이는 자동으로 조정됩니다. 원본 이미지와의 비율을 유지하므로 왜곡이 발생하지 않습니다. 

 

100% 100%: 너비와 높이를 각각 요소의 100%로 지정합니다. 이미지가 부모요소와 동일한 크기로 확대됩니다. 왜곡이 발생할 수 있습니다. 

 

50% : 너비와 높이를 각각 요소의 50%로 지정합니다. 이미지가 부모요소의 반만큼 크기로 축소됩니다. 비율을 유지하므로 왜곡이 발생하지 않습니다. 

(background-size의 백분율 값은 해당 속성이 적용된 요소의 부모요소와의 관계를 나타내는 수치입니다)

 

cover : 배경 이미지가 요소를 완전히 덮도록 크기를 조절합니다. 이미지의 일부가 잘릴 수 있지만 왜곡이 발생하지 않습니다. 

 

contain : 배경 이미지가 요소 안에 딱 맞도록 크기를 조절합니다. 이미지의 일부가 보일 수 있지만 왜곡이 발생하지 않습니다. 

 

initial : 기본값으로 설정하며, 원본 이미지의 크기를 유지합니다. 이미지가 요소보다 크면 자동으로 축소되고, 작으면 확대됩니다.

왜곡이 발생할 수 있습니다. 

 

 

https://www.w3schools.com/cssref/playit.php?filename=playcss_background-size&preval=cover

W3Schools CSS background-size demonstration