배경 이미지를 다른 div로 설정하고 싶지만 내 문제는 다음과 같습니다.

1. 이미지의 크기는 고정 (60px)입니다.
2. 다양한 div 크기

div의 전체 배경을 채우기 위해 배경 이미지를 늘리려면 어떻게해야합니까?

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

여기에서 코드를 확인하세요.

더하다

background-size:100% 100%;

배경 이미지 아래의 CSS에.

정확한 치수를 지정할 수도 있습니다. 예 :

background-size: 30px 40px;

여기 : JSFiddle

당신이 사용할 수있는:

background-size: cover;

또는 다음과 함께 큰 배경 이미지를 사용하십시오.

background: url('../images/teaser.jpg') no-repeat center #eee;

최신 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%;
}

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

이를 위해 CSS3 background-size속성을 사용할 수 있습니다 . 다음과 같이 작성하십시오.

#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;
}

이것을 확인하십시오 : http://jsfiddle.net/qdzaw/1/

다음을 추가 할 수 있습니다.

#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;
}

여기에서 더 많은 것을 읽을 수 있습니다 : css3 background-size

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

속성 css를 사용하여 :

background-size: cover;

사용 : 배경 크기 : 100 % 100 %; div 크기에 맞게 배경 이미지를 만듭니다.

종횡비를 유지하려면 background-size: 100% auto;

div {
    background-image: url('image.jpg');
    background-size: 100% auto;
    width: 150px;
    height: 300px;
}

다음과 같이 시도하십시오.

div {
    background-image: url(../img/picture1.jpg);
    height: 30em;
    background-repeat: no-repeat;
    width: 100%;
    background-position: center;
}