CSS3 배경 크기

CSS3 배경 크기

CSS3 background-size속성을 사용하면 배경 이미지의 크기를 지정할 수 있습니다.

CSS3 이전에는 배경 이미지의 크기가 이미지의 실제 크기였습니다. CSS3를 사용하면 다른 상황에서 배경 이미지를 재사용 할 수 있습니다.

크기는 길이, 백분율 또는 두 키워드 중 하나를 사용하여 지정할 수 있습니다 : 포함 또는 표지.

다음 예제는 픽셀을 사용하여 배경 이미지의 크기를 원본 이미지보다 훨씬 작게 조정합니다.

#div1 {
    background: url(img_flower.jpg);
    background-size: 100px 80px;
    background-repeat: no-repeat;
}

에 대한 다른 두 개의 값 background-size은 contain 및 cover입니다.

contain키워드 (콘텐츠 영역의 내부에 들어가 있어야하지만 폭과 높이 모두) 가능한 한 크게 배경 이미지를 확장 할 수 있습니다. 이와 같이 배경 이미지와 배경 위치 영역의 비율에 따라 배경 이미지로 덮히 지 않는 배경 영역이있을 수 있습니다.

cover컨텐츠 영역이 완전히 (폭 및 높이가 모두 동일 또는 콘텐츠 영역을 초과) 배경 화상에 포함되도록 키워드는 배경 이미지 스케일링. 따라서 배경 이미지의 일부는 배경 위치 지정 영역에서 보이지 않을 수 있습니다.

다음 예제에서는 contain및을 사용하는 방법을 보여줍니다 cover.

#div1 {
    background: url(img_flower.jpg);
    background-size: contain;
    background-repeat: no-repeat;
}
#div2 {
    background: url(img_flower.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}