하단에 항상 바닥 글이 있습니다. 내용과 꼬리말의 배경 이미지

Question

내 HTML 페이지는 제목과 메뉴가 맨 위에 있고, 내용 섹션이 아래에 있으며, 바닥 글이 바닥 글에 있습니다. 내용의 크기에 관계없이 바닥 글은 항상 창의 아래쪽에 있어야합니다 (내용이 창보다 높으면 내용이 바닥 글에 있어야 함). 나는 이것을 구현하는 마크 업과 CSS 규칙을 가지고있다 (아래).

하지만 내용과 꼬리말에 배경 이미지도 표시해야합니다. 즉, 이미지는 전체 화면이 아니라 제목/메뉴 영역을 포함해야합니다. 나는 이것을 어떻게 성취 할 것인지 잘 모른다. 아래 코드 (http://jsfiddle.net/EGj54/의 jsfiddle뿐 아니라)에서 전체 페이지에 배경을 붙 였지만 내용과 바닥 글에 대해서만 표시하고 싶습니다.

누군가 나를 도와 줄 수 있습니까?

<div id="main"> 
    <div id="navbar"> 
     <div id="caption"><span>Test</span></div> 
     <ul id="sections"> 
      <li><span>current</span></li> 
      <li><a href="">next</a></li> 
     </ul> 
    </div> 
    <div id="content">content</div> 
    <div class="push"></div> 
</div> 
<div id="footer">footer</div> 

* { 
    margin: 0; 
} 
html, body { 
    height: 100%; 
} 
ul { 
    list-style-type: none; 
} 
ul li { 
    display: inline; 
} 
#caption { 
    font-weight: bold; 
} 
#footer, .push { 
    color: white; 
    height: 25px; 
} 
#sections { 
    background-color: #aaaaaa; 
} 
#main { 
    height: auto !important; 
    margin: 0 auto -25px; /* bottom margin is negative value of #footer height */ 
    min-height: 100%; 
} 
#main { 
    background-image: url('http://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Clouds_over_the_Atlantic_Ocean.jpg/800px-Clouds_over_the_Atlantic_Ocean.jpg'); 
    background-size: cover; 
} 

Answer 1

당신은 당신이 같은 부정 행위를 할 수

#main { 
    background-image: url('yourimage.jpg'); 
    background-size: cover; 

    background-position: 0 100px; // 100px or whatever the height of your navbar is 
} 

또는 이미지의 background-position을 설정할 수 있습니다)

#content { 
    height: 100px; 
    background: url('yourimage.jpg') top; 
} 
#footer { 
    height: 50px; 
    background: url('yourimage.jpg') bottom; 
} 

Answer 2

당신이 마지막에 위치하기 때문에 바닥에 남아있을 것입니다 귀하의 글 div30과 함께 float 또는 절대 위치 지정을 사용하지 않는 한 문제가 없습니다. 백그라운드에서 배경을 옮겨 문제를 해결하려면

body { 
    background-image: url('http://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Clouds_over_the_Atlantic_Ocean.jpg/800px-Clouds_over_the_Atlantic_Ocean.jpg'); 
    background-size: cover; 
} 

Answer 3

배경 이미지의 세로 위치를 조정하면됩니까?

background-position: left 20px;