Html 无法获取扩展整个页面的两个背景图像？_Html_Css_Layout

Html 无法获取扩展整个页面的两个背景图像？

html css layout

Html 无法获取扩展整个页面的两个背景图像？,html,css,layout,Html,Css,Layout,这是我试图实现的布局我有一个背景的重复样本，它被设置为html的背景，所以灰纸结构在设计之外重复然后我有竹子的插图，放在身体的背景上我似乎无法让竹子不被切断到内容结束的地方最好的方法是什么中间的白色内容分区至少需要延伸到页面的底部，我一辈子都搞不清楚这似乎是最简单的事情这就是现在的样子- 这是密码 <html> <body> <div id="wrapper"> <div id="header"

这是我试图实现的布局

我有一个背景的重复样本，它被设置为html的背景，所以灰纸结构在设计之外重复

然后我有竹子的插图，放在身体的背景上

我似乎无法让竹子不被切断到内容结束的地方

最好的方法是什么

中间的白色内容分区至少需要延伸到页面的底部，我一辈子都搞不清楚这似乎是最简单的事情

这就是现在的样子-

这是密码

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

我不知道你想更改什么…你能发布你的代码吗

或者你想延伸哪一个，因为在我看来，竹子的图片一直向下延伸，如果你想进一步延伸，也许可以进一步延伸高度：120%

您需要在html容器上设置高度100%，在正文容器上设置最小高度

我试过了，但是当页面上的内容超过最初的100%时，图像就会被切断。例如，如果我的初始浏览器高度约为600px，如果我有800px的内容，那么我必须向下滚动200px才能看到的额外内容将在原来的600px行处截断竹子设计

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;
}

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;
}