최신 CSS3 (미래 권장 및 아마도 최상의 솔루션)

.selector{
   background-size: cover;
   /* stretches background WITHOUT deformation so it would fill the background space,
      it may crop the image if the image's dimensions are in different ratio,
      than the element dimensions. */
}

맥스. 자르기 또는 변형없이 늘이기 ( 배경을 채울 수 없음) : background-size: contain;

절대 늘이기 (변형을 일으킬 수 있지만 자르기 없음) : background-size: 100% 100%;

“오래된”CSS “항상 작동하는”방식

(상대 위치) 부모 의 첫 번째 자식으로 이미지를 절대 위치 지정 하고 부모 크기로 늘립니다.

HTML

<div class="selector">
   <img src="path.extension" alt="alt text">
   <!-- some other content -->
</div>

CSS3와 동일 background-size: cover;:

이를 동적으로 달성하려면 컨테이너 대안 (아래 참조) 의 반대 를 사용해야 하며 잘린 이미지를 중앙에 배치해야하는 경우 동적으로 수행하려면 JavaScript가 필요합니다 (예 : jQuery 사용).

$('.selector img').each(function(){
   $(this).css({
      "left": "50%",
      "margin-left": "-"+( $(this).width()/2 )+"px",
      "top": "50%",
      "margin-top": "-"+( $(this).height()/2 )+"px"
   });
});

실제 예 :

CSS3와 동일 background-size: contain;:

이것은 약간 까다로울 수 있습니다. 부모가 오버플로되는 배경의 크기는 CSS를 100 %로 설정하고 다른 하나는 자동으로 설정합니다.
실제 예 :

.selector img{
   position: absolute; top:0; left: 0;
   width: 100%;
   height: auto;
   /* -- OR -- */
   /* width: auto;
      height: 100%; */
}

CSS3와 동일 background-size: 100% 100%;:

.selector img{
   position: absolute; top:0; left: 0;
   width: 100%;
   height: 100%;
}

추신 : “이전”방식으로 완전히 동적으로 커버 / 컨테 이닝을 수행하려면 (오버플로 / 비율에 대해 신경 쓸 필요가 없습니다) 자바 스크립트를 사용하여 비율을 감지하고 설명 된대로 크기를 설정해야합니다. ..

답변

#div2{
    background-image:url(http://s7.static.hootsuite.com/3-0-48/images/themes/classic/streams/message-gradient.png);
    -moz-background-size:100% 100%;
    -webkit-background-size:100% 100%;
    background-size:100% 100%;
    height:180px;
    width:200px;
    border: 1px solid red;
}

#div2{
    background-image:url(http://s7.static.hootsuite.com/3-0-48/images/themes/classic/streams/message-gradient.png);
    background-size: 100% 100%;
    height:180px;
    width:200px;
    border: 1px solid red;
}

body{
  margin:0;
  background:url('image.png') no-repeat 50% 50% fixed;
  background-size: cover;
}

background-size: cover;