background-size
background-size로 배경 이미지의 가로 세로 크기를 정합니다.
기본형
background-size : auto | length | cover | contain
- auto : 이미지 크기를 유지합니다.
- length : 값을 두 개 넣으면 첫번째 값이 가로 크기, 두번째 값이 세로 크기입니다. 값을 한 개 넣으면 가로 크기이며, 세로 크기는 원본 이미지의 가로 세로 비율에 맞게 자동으로 정해집니다.
- cover : 배경을 사용하는 요소를 꽉 채울 수 있게 이미지를 확대 또는 축소합니다.
- contain : 배경을 사용하는 요소를 벗어나지 않는 최대 크기로 이미지를 확대 또는 축소합니다.
예제
각 속성값에 따라 배경 이미지 크기가 어떻게 적용되는지 보여주는 간단한 예제입니다.
사용한 이미지의 크기는 200x200입니다.
background-size: auto
background-size 속성 값이 모두 auto일 경우, 원래 배경 이미지 크기 그대로 표시됩니다.
<p>background-size: auto;</p>
<div class="box"></div>
body {
text-align: center;
}
.box {
width: 100%;
height: 250px;
border: 1px solid #cccccc;
background-image: url("https://bit.ly/2GrygUe");
background-repeat: no-repeat;
background-position: center center;
background-size: auto;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
background-size: length
속성으로 입력된 값이 채워질 요소의 크기입니다. 값을 두 개 넣으면 첫번째 값이 가로 크기, 두번째 값이 세로 크기입니다.
값을 한 개 넣으면 가로 크기이며, 세로 크기는 원본 이미지의 가로 세로 비율에 맞게 자동으로 정해집니다.
<p>background-size: 75% 75%;</p>
<div class="box"></div>
body {
text-align: center;
}
.box {
width: 100%;
height: 250px;
border: 1px solid #cccccc;
background-image: url("https://bit.ly/2GrygUe");
background-repeat: no-repeat;
background-position: center center;
background-size: 75% 75%;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
background-size: cover
요소 전체를 모두 덮도록 배경 이미지를 확대하거나 축소합니다.
<p>background-size: cover;</p>
<div class="box"></div>
body {
text-align: center;
}
.box {
width: 100%;
height: 250px;
border: 1px solid #cccccc;
background-image: url("https://bit.ly/2GrygUe");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
요소 안에 배경 이미지를 딱 맞게 채우려면 background-size를 cover 또는 100%로 지정할 수 있습니다.
background-size: contain
요소 안에 모든 배경 이미지가 표시되도록 확대하거나 축소합니다.
<p>background-size: contain;</p>
<div class="box"></div>
body {
text-align: center;
}
.box {
width: 100%;
height: 250px;
border: 1px solid #cccccc;
background-image: url("https://bit.ly/2GrygUe");
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.