배경 이미지가 창 크기로 조절되지 않음

Question

기본적으로 나는 매우 큰 이미지 (3000 x 2000 이상)를 배경 이미지로 설정하고 창 크기 조정에 따라 크기를 조정하려고합니다. 그러나, 아직도 내가 100 %로 폭을 설정하고 때조차 원래 해상도의 (오른쪽으로 화면을 클립 숨겨진) 숙박하고자하는 최대 폭에 컨테이너 100 %

HTML

<div class="container-fluid"> 
    <div id="image-container"> 
    </div> 
</div> 

CSS

.container-fluid { 
    height: 100%; 
    width: 100%; 
    padding: 0; 
    } 

#image-container { 
    background-image: url(../img/bg.png); 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    width: 100%; 
    height: 100%; 
    } 

내가 편집 부트 스트랩의 .container-fluid 비트가 기본 15 픽셀의 패딩과 더 폭 또는 높이가 없었다 사실 없애했다. 부트 스트랩이 원인이 될 수있는 몇 가지 속성이 있는지 정확히 알 수는 없지만 디버거를 살펴볼 때 계산 된 너비가 매우 커지면 width 속성이 #image-container이고 100 %로 설정됩니다. 하지만 부모님은 내가 알고있는 뷰포트보다 더 크게 설정되어 있지 않습니다. (컨테이너의 max-width: 100%;을 설정하면 이미지가 사라집니다.)

Answer 1

border-size 속성의 퍼센트 속성을 사용하십시오.

html, body { 
    height: 100%; 
} 

.container-fluid { 
    height: 100%; 
    width: 100%; 
    padding: 0; 
    } 

#image-container { 
    background-image: url(https://c1.staticflickr.com/9/8270/8998617248_977cfe9d55_b.jpg); 
    -webkit-background-size: 100%; 
    -moz-background-size: 100%; 
    -o-background-size: 100%; 
    background-size: 100%; 
    background-repeat: no-repeat; 
    height: 100%; 
    } 

http://www.w3schools.com/cssref/css3_pr_background-size.asp