0

这是我试图实现的布局。

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

2 回答 2

0

我对你想改变什么感到困惑......你能发布你的代码吗？

或者你想延长哪个，因为在我看来，竹图片一直向下，如果你想要更远，也许可以进一步拉伸（高度：120％;）？？

于 2012-04-07T04:37:19.710 回答
0

您需要在 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-07T04:58:47.933 回答