background-size : cover와 background-position : center

html에서 'background-position : center;'와 'background-size : cover;'를 알아보자.

클래스가 'img_wrap' div태그가 있다.
이 클래스의 너비와 높이를 370px로 설정했고
이 클래스 배경이미지를 어느 이미지의 링크를 복사해서 설정했다
아무런 조건도 주지 않았을때는 이 사진의 이미지크기(240*240)로 배경을 전부 채운다
결과는 아래와 같다

<style>
.img_wrap{
                width: 480px;
                height: 370px;
                border: 1px solid red;
                margin: 0px auto;
                background-image: url(https://t1.daumcdn.net/brunch/static/img/sticker/muzi/6.png);
            }
</style>
<div class="img_wrap"></div>

background-position : center; 로 설정해보자

<style>
.img_wrap{
                width: 480px;
                height: 370px;
                border: 1px solid red;
                margin: 0px auto;
                background-image: url(https://t1.daumcdn.net/brunch/static/img/sticker/muzi/6.png);
                background-position: center;
            }
</style>
<div class="img_wrap"></div>

이미지가 가운데 중앙에 오게되고 나머지 공간을 배경 이미지로 채워준다

background-size : cover; 로 설정해보자

<style>
.img_wrap{
                width: 480px;
                height: 370px;
                border: 1px solid red;
                margin: 0px auto;
                background-image: url(https://t1.daumcdn.net/brunch/static/img/sticker/muzi/6.png);
                background-size : cover;
            }
</style>
<div class="img_wrap"></div>

이미지가 배경의 크기를 꽉 채우는 것을 볼 수 있다.