2012-10-13 3 views
0

나는 내 신체의 이미지가 신체의 높이를 확장하는 것을 막으려 고했지만 성공하지는 못했습니다. 콘텐츠가 증가 할 때만 본문을 확장하고 배경 이미지는 확대하지 않습니다.CSS가 이미지 형태를 확장하는 신체 높이를 방지합니다.

는 여기에 코드입니다 :

body 
{ 
    background-color: #000000; 
    color: #FFFFFF; 
    font-family: Georgia, Verdana, Geneva, sans-serif; 
    overflow-x: hidden; 
} 

#background_container img 
{ 
    position: absolute; 
    top: 0; 
    left: 50%; 
    margin: 0 0 0 -1250px; 
    z-index: -10; 
} 

<body> 



       <div id="background_container"> 

        <img src="_images/main_background.jpg" width="2500" height="2003"> 

       </div> 

       <div> 

      CONTENT GOES HERE 
      CONTENT GOES HERE 
      CONTENT GOES HERE 
      CONTENT GOES HERE 
      CONTENT GOES HERE 
      CONTENT GOES HERE 
      CONTENT GOES HERE 
      CONTENT GOES HERE 
      CONTENT GOES HERE 
      CONTENT GOES HERE 
      CONTENT GOES HERE 
      CONTENT GOES HERE 

      </div> 

</body> 

그것은 신체의 높이 만 내가 더 많은 콘텐츠가있을 때 확장 그래서 일을해야하고,이 발생할 때까지 스크롤 막대가 없습니다.

저는 자바 스크립트를 전혀 사용하고 싶지 않습니다. 사전

+0

이미지를 완전히 잘못 사용하고 있습니다. 배경 이미지로 사용하려면 CSS에서 배경 이미지로 설정해야합니다. 내 대답은이 작업을 수행하는 방법의 예를 참조하십시오. 데모도 포함되었습니다. – xception

답변

2

에서

덕분에이 CSS를보십시오 : 대신

<body> 
     <div> 
     CONTENT GOES HERE 
     CONTENT GOES HERE 
     CONTENT GOES HERE 
     CONTENT GOES HERE 
     CONTENT GOES HERE 
     CONTENT GOES HERE 
     CONTENT GOES HERE 
     CONTENT GOES HERE 
     CONTENT GOES HERE 
     CONTENT GOES HERE 
     CONTENT GOES HERE 
     CONTENT GOES HERE 
     </div> 
</body> 

DEMO이 HTML로

body 
{ 
    background-color: #000000; 
    color: #FFFFFF; 
    font-family: Georgia, Verdana, Geneva, sans-serif; 
    overflow-x: hidden; 
} 
body > div 
{ 
    background-image: url(_images/main_background.jpg); 
    background-position: top center; 
} 

을 - 나는 데모에 일부 외부 이미지를 사용하기 때문에 나는 가능하게 할 수 없습니다 당신이 배경을 위해 무엇을 사용하는지 추측하십시오. div에 contenteditable을 추가하고 javascript로 초점을 맞추기 때문에 입력을 시작하고 div가 커지면서 div가 어떻게 펼쳐지는지 확인할 수 있습니다.

+0

필자는 항상 배경 이미지를 별도 div로 사용하여 제 의견으로는 더 많은 기능을 제어 할 수 있습니다. 시도해 보겠습니다. – pathurs

+0

현재 최신 CSS 속성으로 배경을 제어 할 수 있습니다. 그. – xception

관련 문제