2013-03-17 80 views
2

我正在嘗試創建一個框,它從上面和下面延伸到背景,並且仍然可以擴展以容納更大的段落。位置不能以百分比工作

我試圖創建2個重疊的DIV,其中一個包含背景,另一個包含內容,我縮短了背景background-size: 100% 90%並嘗試使用top: -5%將內容div移到頂端,但它不起作用。

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

如果我更改爲top:-10px它的工作位置,但它不會停留在底部和頂部時的內容將增加相等。

+0

你通過AJAX更新,或與新的內容重新加載頁面? – Tomer 2013-03-17 12:54:19

+0

這將在CMS中使用,因此稍後用戶將通過後端添加內容。 – 2013-03-17 13:21:51

回答

2

嘗試從背景圖片的頂部添加50%,其餘代碼都很好。

background: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%; 
} 
+0

謝謝Sushil Raghav,我仍然需要使用頂部:-5%,因爲我需要重疊圖像上方的頂部延伸部分。我更新了jsfiddle以反映這一點。 – 2013-03-18 10:10:25