패턴이 반복되는 이미지를 배경 이미지로 사용할 경우 코딩하는 방법을 알아봅시다.
background-size는
contain으로 가로, 세로 원본비율로 설정되는 것으로 이미지 전체가 보여지도록 설정이 됩니다. 이때 부모 div의 크기에 따라서 이미지가 전체에 꽉 들어차지 못할수도 있습니다.
cover으로 가로, 세로 중앙비율로 설정되는 것으로 부모 div 영역 안에 백그라운드 이미지가 빈 틈 없이 매워지게 하는 가장 효과적인 방법입니다. 하지만 이미지의 일부가 잘리는 단점이 있습니다.
따라서 이미지가 꽉차도록 contain으로 잡습니다.
또한, background-repeat: repeat; 혹은 background-repeat: repeat-x;으로 반복되도록 설정하면
이미지 크기가 크지않아도, 반복되어 노출시킬 수 있습니다.
background-image: url('../images/section-main-bg.png');
background-position: center;
background-size: contain;
background-repeat: repeat;참고사이트 : background-size: contain vs cover
https://rgy0409.tistory.com/2994
