background-size로 배경 이미지 크기 조절하는 방법

1. background-size? 

배경 이미지 크기는 background-size로 조절한다. background-size에는 여러 속성이 있어 다양한 크기로 이미지 조절이 가능하다.

 

• auto : 배경 이미지의 원본 크기를 유지한다. 
• length : 두 개의 값을 넣으면 첫 번째는 너비, 두 번째는 높이 값이다.  값을 한 개 넣은 경우는 너비 값을 뜻하며, 높이 값은 원본 이미지의 비율에 맞게 자동으로 정해진다. 백분율도 사용이 가능하며 단, 음수는 적용되지 않는다. 
• cover : 배경의 빈 공간이 없도록 이미지 비율에 맞게 확대, 축소된다. 너비와 높이의 비율이 유지되어 이미지가 찌그러지지 않지만 비율 때문에 이미지가 잘리기도 한다. 
• contain : 배경 안에서 이미지가 찌그러지거나 잘리는거 없이 다 보이도록 확대, 축소된다. 

 

2. HTML, CSS 소스 

[HTML]

<div class="wrap">
  <div>
    <div class="box img1"></div>
    <p>background-size: auto;</p>
  </div>
  <div>
    <div class="box img2"></div>
    <p>background-size: 300px 400px;</p>
  </div>
  <div>
    <div class="box img3"></div>
    <p>background-size: 80%;</p>
  </div>
  <div>
    <div class="box img4"></div>
    <p>background-size: cover;</p>
  </div>
  <div>
    <div class="box img5"></div>
    <p>background-size: contain;</p>
  </div>
</div>

 

[CSS]

<style type="text/css">
/*reset*/
* {margin: 0; padding: 0; box-sizing: border-box;}
li {list-style: none;}
img {border: 0; outline: 0}
a {text-decoration: none; color:#000;}
button, fieldset, input{border: 0; outline: 0; background: none;}
button {cursor: pointer;}
table {border-collapse: collapse; border-spacing: 0}
caption, legend {font-size: 0; color:transparent; text-indent: -9999px; overflow: hidden;}
body,html{height: 100%;}

.wrap{width: 500px; border: 1px solid #000; margin: 50px;}
.wrap > div{padding: 20px; border-bottom: 1px solid #000;}
.wrap > div:last-child{border-bottom: 0;}
.box{width: 300px; height: 300px; margin: 0 auto; border: 1px solid #555;background-image: url('돌고래.jpg'); background-repeat: no-repeat; } 
/*이미지 반복을 없애기 위해 background-repeat: no-repeat; 넣어줌*/
p{text-align: center; font-weight: bold;}

/*background-size 적용*/
.img1{background-size: auto;}
.img2{background-size: 300px 400px;}
.img3{background-size: 80%;}
.img4{background-size: cover;}
.img5{background-size: contain;}
</style>

 

3. 결과 화면 

background-size 속성에 따라 아래의 이미지(640*400px) 가 다르게 적용되는 것을 확인할 수 있다. 

640*400 원본 사진

background-size 적용 화면