CSS 창 높이

Question

난 내가 가진 배경 문제를 가지고하는 #container 요소가 :

html { 
    font-family: Arial, sans-serif; 
    height:100%; 
} 


body{ 
    margin: 0 auto; 
    padding: 0; 
    font-size: 12px; 
    height:100%; 
    background:url(/_images/body-bg.jpg) top center no-repeat; 
    /*background:#0068b3; 
    background: -webkit-gradient(linear, left top, left bottom, from(#bfd9ed), to(#0068b3)); 
    background: -moz-linear-gradient(top, #bfd9ed, #0068b3); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bfd9ed', endColorstr='#0068b3')*/ 

} 

#container { 
    width:995px; 
    margin: 0 auto; 
    padding: 0; 
    height:100%; 
    position:relative; 

} 

난 배경 이미지가 #container에 추가하고 페이지에서 배경 스크롤 필요한 콘텐츠가있는 경우 이미지는 창 높이의 양만 표시하고 스크롤하면 배경 이미지가 표시되지 않습니다.

왜 그럴까요?

Answer 1

의 CSS 속성 background에 no-repeat이 있습니다.

repeat 또는 repeat-y으로 변경하면 세로로만 반복됩니다. 이미지가 사업부로 이동하지 않도록 고정으로

Answer 2

, 나는 그것을 설정해야합니다

이

#container { 
    background:url('img.png') top left no-repeat; 
    background-attachment:fixed; //this will avoid scroll 
} 

사업부의 크기에 이미지, 당신은 background-size: 100%;를 사용할 수있는 스트레칭을하기 위해

하지만입니다 css3 속성을 사용하며 이전 브라우저 (IE8-)에서는 작동하지 않습니다.

컨테이너의 너비가 고정되어 있으면 컨테이너의 너비가 동일한 이미지를 만드십시오. 그렇지 않으면 자바 스크립트 솔루션을 구현하여 그에 맞게 크기를 조정해야합니다.