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

何を変更したいのか混乱しています...コードを投稿していただけますか?

それとも、竹の絵がずっと下にあるように見えるので、どちらを伸ばしたいですか?

于 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 に答える