0

http://www.gardencrafts.c​​o.uk/index.htm

上記のリンクでは、背景に葉っぱが体の真ん中まで伸びています！私が欲しいのは、この画像全体を 3 つのセクションに分けることです。ヘッダー、コンテンツ、そして最後にフッター。ヘッダーに必要な部分をトリミングしましたが、問題は葉が背景画像の高さを 600px にすることです。ヘッダーの高さは 150px なので、背景の余分な部分は隠されています。

CSS で Overflaw を表示しようとしましたが、うまくいきません。ヘッダー div の高さを変更せずに、画像にコンテンツ全体を表示するにはどうすればよいですか?

これは、現在のヘッダー DIV の CSS コードです。

  #header{
background-image: url(../images/top-bg.png);
background-repeat: no-repeat;
margin: 0 auto;
width: 1000px;
height: 200px;
overflow: visible;
}
4

2 に答える 2

0

これは多くの方法で解決できます。これらの解決策の1つを次に示します。

落ち葉を含むページ#bodyの完全なオリジナルを提供します。background-image

右を使用すると、の上半分と下半分background-positionをマージできます。#header#body

それをチェックしてください：JSFiddle

HTML

<div id="header">
</div>
<div id="body">
</div>

CSS

#header
{
    background-image:url("https://twitter.com/images/resources/twitter-bird-white-on-blue.png");
    width:300px;
    height:150px;
    border-style:none;
    border-left-style:solid;
    border-right-style:solid;
    border-color:yellow;
}
#body
{
    background-image:url("https://twitter.com/images/resources/twitter-bird-white-on-blue.png");
    width:300px;
    height:300px;
    background-position: 0px -150px;
    border-style:none;
    border-left-style:solid;
    border-right-style:solid;
    border-color:red;
}

ただし、これにより、background-imageが繰り返され（停止しない場合）、後で別の葉が表示されます。

于 2013-02-02T08:19:13.613 に答える
0

その背景をヘッダーの親コンテナーに適用する必要があると思いますが、より良い答えを提供するには、コードを確認する必要があります

于 2013-02-02T08:01:50.687 に答える