Question

这是我试图实现的布局。

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

我有一个重复的背景样本设置为html的背景，所以灰色纸张重复超出设计。

然后我将竹插图置于身体背景之上。

我似乎无法将竹子切断到内容结束的地方。

最好的方法是什么？

中心的白色内容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;
}

Answer 1

我对你要改变什么很困惑......你能发布你的代码吗？

或者你想延伸哪一个，因为在我看来竹子画像一直都是如此，如果你想要更进一步，可能会进一步拉伸（高度：120％;）??

Answer 2

你需要在html容器上设置高度100％，在body容器上设置min-height。

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

无法获得延伸整个页面的两个背景图像？

2 个答案: