컨테이너 div를 채우지 않고 백분율로 상대 절대 위치로 다시 채우기

나는 절대 위치 및 백분율로 상대적인 페이지 &을 사용하고 있습니다. HTML & 본문은 100 %로 설정되고 컨테이너 div는 상대적이며 내부 div는 절대적입니다. 컨테이너 div에 설정 한 반복되는 배경 이미지가 페이지를 채우지 못합니다. 이유는 무엇입니까? 미리 감사드립니다! 여기컨테이너 div를 채우지 않고 백분율로 상대 절대 위치로 다시 채우기

내가있어 무엇 :

<style type="text/css"> 
html, body { 
width:100%; 
    height:100%;} 

.container { 
    width:1000px; 
    height:100%; 
    background-image:url('background.jpg'); 
    position: relative; 
    margin-left:auto; 
    margin-right:auto; 
    } 
.header { 
    width:1000px; 
    height:300px; 
    background-color:#ffffff; 
    position: absolute; 
    top:0px; 
    left:0px; 
    } 


.content { 
    width: 680px; 
    position:absolute; 
    top: 350px; 
    left: 310px; 
    } 

.post { 
    width: 630px; 
    padding: 20px; 
    padding-top: 50px; 

    } 

.title { 
    width: 650px; 
    height: 20px; 
    padding: 10px; 
    position: absolute; left: -10px; top: 10px; 
    } 




</style> 

<body> 
<div class="container"> 

<div class="header"> 
Placeholder for header image. 
<p><a href="index.html">Home</a></p> 
</div> 


<div class="content"> 
    <div class="post"> 
    <div class="title">Welcome</div> 

    <img src="PLACEHOLDER.JPG" alt="Proposal Photo" width="630" /> 
    </div> 
</div> 
</div>

출처

2013-07-20 user1801221

닫힌 스타일 태그 뒤에 HTML –

이 게시되어 있으면 도움이 될 수 있습니다. 눈에 보이지 않습니까? – user1801221

이제 브라우저에서 페이지가 완전히로드되지 않았습니다. 내 문제. –

이 당신이 원하는 무엇인가? 당신이 볼 수 있듯이

Fiddle 그냥 내가 약식 속성을 사용의 div.container 요소

background: url('Your URL') repeat;

이 CSS 규칙을 추가합니다.

BTW, 그냥 100 %로하여 html에서 height 및 body를 추가 (동일한 결과를 얻을 수 있습니다 그 height 및 width 속성을 추가).

html, body { 
    height: 100%; 
}

출처

2013-07-20 17:23:52 leoMestizo

그것은 작동해야하지만 반복되는 배경 이미지는 화면의 일부만 채우고 나는 왜 안 좋은지 잘 모르겠다. – user1801221

'position' 속성으로 레이아웃을 만들었 기 때문에. – leoMestizo

배경이 화면의 전체 너비를 채우지 못하는 이유는 이해하지만 컨테이너 div는 100 % 높이로 설정되어 있으므로 반복되는 배경 이미지가 브라우저 창의 전체 높이를 채우지 않아야합니까? – user1801221

컨테이너 div를 채우지 않고 백분율로 상대 절대 위치로 다시 채우기

답변

관련 문제