css3 background-size

기존 css에서 추가된 css3추가 속성인 background-size에 대해서 알아봅시다.

기존에 백그라운드 이미지를 사용하였을때 정렬 및 위치만 사용할수 있었는데

background-size 이 속성을 추가하여 더욱 편리한 백그라운드를 사용할 수 있는데요.

우선 다음과 같은 속성이 있습니다.

auto	기본값. 배경 이미지의 너비와 높이가 포함되어 있습니다.
lenth	배경 이미지의 너비와 높이를 설정합니다. 첫 번째 값은 너비를 설정하고 두 번째 값은 높이를 설정합니다. 하나의 값만 주어지면 두 번째 값은 "auto"로 설정됩니다.
percentage	부모 요소의 백분율로 배경 이미지의 너비와 높이를 설정합니다. 첫 번째 값은 너비를 설정하고 두 번째 값은 높이를 설정합니다. 하나의 값만 주어지면 두 번째 값은 "auto"로 설정됩니다.
cover	백그라운드 영역이 가능한 한 크게되도록 배율을 조정하여 배경 영역이 배경 이미지로 완전히 덮 이도록합니다. 배경 이미지의 일부는 배경 위치 영역 내에서 보지 못할 수 있습니다.
contain	이미지의 너비와 높이가 내용 영역 안에 들어갈 수 있도록 이미지의 크기를 최대로 조정합니다.
initial	이 속성을 기본값으로 설정합니다

-auto-

div {

    background-image:url('sample.gif');

    background-repeat:no-repeat;

    background-size:auto;

}

-lenth-

div {

    background-image:url('sample.gif');

    background-repeat:no-repeat;

    background-size:100px 100px;

}

-percentage-

div {

    background-image:url('sample.gif');

    background-repeat:no-repeat;

    background-size:50%;

}

-cover-

div {

    background-image:url('sample.gif');

    background-repeat:no-repeat;

    background-size:cover;

}

-contain-

div {

    background-image:url('sample.gif');

    background-repeat:no-repeat;

    background-size:contain;

}

-initial-

div {

    background-image:url('sample.gif');

    background-repeat:no-repeat;

    background-size:initial;

}

위와같은 속성들의 추가로 더욱더 편리하고 자유로운 코딩이 가능하게 되었는데요. 

실질적으로 lenth와 cover 속성등이 저는 많이 쓰이는 것같습니다.

다른 분들도 테스트 많이 해보시고 실제 코딩에도 많이 활용해보세요!