無法獲得兩張延伸頁面整個頁面的背景圖片？

這裏是我試圖實現的佈局。無法獲得兩張延伸頁面整個頁面的背景圖片？

http://i.imgur.com/kA0yw.jpg

我有被設置爲HTML的背景，使超出設計的灰紙tecture重複的背景的重複樣本。

然後我有竹身上的那個圖案，放在身體的背景上。

我似乎不能把竹子切斷到內容結束的地方。

這樣做的最佳方法是什麼？

在中心的白內容的div需要向下延伸到頁面的至少底部，我不能爲我的生活想出解決辦法好像它必須做

最簡單的事情

這是它看起來像現在 - http://i.imgur.com/55dPe.png

這裏是代碼

<html> 
    <body> 
     <div id="wrapper"> 
      <div id="header"></div> 
     <div id="content"></div> 
     </div> 
    </body> 
</html>

和CSS

html{ 
background:url(images/background_swatch.png) top center; 
} 

body{ 
margin:0 auto; 
background:url(images/background.png) top center no-repeat; 
} 


div#wrapper{ 
margin:0 auto; 
width:800px; 
background-color:#FFF; 
border-left:5px solid black; 
border-right:5px solid black; 
} 

#header{ 
margin:0 auto; 
position:relative; 
top:25px; 
background:url(images/navigation_banner.png) no-repeat; 
width:850px; 
height:150px; 
left: -25px; 
}

來源

2012-04-07 Gazow

我很困惑你想改變什麼...你可以發佈你的代碼嗎？因爲在我看來，如果你想要更進一步，可能會進一步拉伸它（高度：120％;）。

來源

2012-04-07 04:37:19

這是photshop文件 - 生病更新後 – Gazow 2012-04-07 04:58:56

您需要在html容器上設置高度100％，正文容器上的最小高度。

http://jsfiddle.net/5FwGZ/

html { 
    height: 100%; 
    background-image: url('http://imjustcreative.com/wp-content/uploads/ImJustCreative-2010-08-23-at-06.06.01.jpg'); 
} 

body { 
    min-height: 100%; 
    width: 100%; 
    background-image: url('http://www.landscapecreationsfl.com/flower-dahlia-pink-transparent-background-350_1_.gif') 
} 
div#content { 
    height: 400px; 
    width: 600px; 
    margin: 0 auto; 
    text-align: center; 
    background: white; 
}

來源

2012-04-07 04:58:47 mrtsherman

我想這的IMG，但每當頁面上的內容遠遠超出了最初的THA 100％圖像被切斷。例如，如果我的初始瀏覽器高度是600像素，如果我說800像素的內容額外的200像素，我必須向下滾動才能看到將原始600像素線的竹子設計切斷 – Gazow 2012-04-07 05:06:55

您確定嗎？ http://jsfiddle.net/5FwGZ/2/ – mrtsherman 2012-04-07 05:34:37

無法獲得兩張延伸頁面整個頁面的背景圖片？

回答

相關問題