배경 이미지 스트레칭을 달성하는 CSS

css3 속성 사용: background-size

background-size: 바탕 화면처럼 펼쳐서 늘어남

다음은 w3c의 설명입니다.

Syntax
background-size: length|percentage|cover|contain; 값 설명
length는 배경 이미지의 높이와 너비를 설정합니다.

첫 번째 값은 너비를 설정하고 두 번째 값은 높이를 설정합니다.

하나의 값만 설정하면 두 번째 값은 "auto"로 설정됩니다.

percent는 배경 이미지의 너비와 높이를 상위 요소의 백분율로 설정합니다.

첫 번째 값은 너비를 설정하고 두 번째 값은 높이를 설정합니다.

하나의 값만 설정하면 두 번째 값은 "auto"로 설정됩니다.

cover 배경 이미지가 배경 영역을 완전히 덮을 수 있도록 배경 이미지를 충분히 큰 크기로 확장합니다.

배경 이미지의 일부가 배경 앵커 영역에 표시되지 않을 수 있습니다.

contain 이미지의 너비와 높이가 콘텐츠 영역에 완전히 맞도록 이미지를 최대 크기로 확장합니다.