背景不是100％的集裝箱格與相對絕對定位百分比

我使用的頁面與相對&絕對定位和百分比。 HTML & Body設置爲100％，容器div是相對的，內部div是絕對的。我已經設置爲容器div的背景圖片並未填充頁面 - 爲什麼？提前致謝！背景不是100％的集裝箱格與相對絕對定位百分比

下面是我得到了什麼：

<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-19 user1801221

試試這個

.container { 
    width:1000px; 
    height:100%; 
    background-image:url('background.jpg') no-repeat; 
    position: relative; 
    margin-left:auto; 
    margin-right:auto; 
    background-size:100% 
}

來源

2013-07-19 14:15:15

非常感謝！我看到我提出這個問題做得不好。爲了澄清，我使用了一個重複的背景，目前只是填充容器div的一部分。我的目標是重複它，填滿整個集裝箱。 – user1801221

這樣做：

body { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
}

那麼你的DIV可以用這個代碼規模：

.container { 
    width:100%; 
    height:100%; 
    position: relative; 
}

來源

2013-07-19 14:19:44 acudars

背景不是100％的集裝箱格與相對絕對定位百分比

回答

相關問題