위치가 백분율로 작동하지 않습니다.

Question

상자를 만들려고합니다. 상자를 위아래로 확장하고 작은 큰 단락도 수용 할 수 있도록 확장 할 수 있습니다.

두 개의 겹치는 DIV를 만들려고했습니다. 하나는 배경과 다른 내용이 포함되어 있습니다. 배경을 background-size: 100% 90%으로 줄이고 top: -5%을 사용하여 내용 div를 맨 위로 이동하려고 시도했지만 작동하지 않습니다.

http://jsfiddle.net/alokjain_lucky/nzM4Y/

내가 그것을 작동 top:-10px에 위치를 변경,하지만 콘텐츠가 증가 할 때 상단과 하단 모두에 동일하게 유지되지 않습니다.

Answer 1

배경 이미지의 상단에서 50 %를 추가하고 휴식 코드를 사용해보세요.

배경 : url (http://staging.xhtml-lab.com/gray-bg.gif) 0 50 % no-repeat;

그것은 작동합니다 :)

예를 :

#landing-bg { 
    background:url(http://staging.xhtml-lab.com/gray-bg.gif) 0 50% no-repeat; 
    position:relative; 
    background-size: 100% 90%; 
    margin-top:10%; 
}