質問

私は時間のカップルのためにこれに取り組んできましたし、それのまわりで私の頭を包むように見えることはできません。 私は、以下の三つの画像を持っている、と私は、これらの上に座ってテキストコンテンツを好きだろうが、私はそれをどのように行うのですか？
真ん中の画像は、コンテナのdiv拡大に繰り返す必要があるだろうイメージです。

さて、私はそれが少し遅れだと私は正確にまっすぐに考えていないよ、情報の私の不足のために謝罪します。私はすべての3枚の画像の入った容器を含んでいたいと思います。このコンテナの最小高さは、上部と下部の画像であろう。内容はこの最小高さをオーバーフローし始めるように、中間像は、より高さに適応するように繰り返し始めるだろう。

トップ： altテキストhttp://files.droplr.com/files/45544730/INDf3。 Page.pngする

繰り返し

中東： ALTテキストhttp://files.droplr.com/files/45544730/ INE5i.Page-Tile.pngする

下： ALTテキストhttp://files.droplr.com/files/45544730/ INFbt.Page-Bottom.pngする

役に立ちましたか？

解決

私の解決策：

私は通常、このようにそれを実行します。

<div class="box">
  <span class="header"></span>
  content
  <span class="bottom"></span>
</div>

CSSます：

.box { background: url(middle.png) repeat-y left top; }
  .box .header { background: url(top.png) no-repeat; display: block; margin-bottom: -480px; /* +set height and width */}
  .box .bottom { background: url(bottom.png) no-repeat; display: block; /*+ height and width*/}
通常、div要素の下には、それが（全体のデザインに間隔を追加するために）空白のままにする大丈夫だそう小さいです。また、負のマージンボトムサイズは次のようになります。 - 。（height - what_you_want_to_remain_empty） - すなわちあなたの.box .headerイメージが540pxを持っており、あなたは私が持っていたとして、あなたが50pxを設定します、トップ-490pxを空のままにしたい場合は、

幸運ます。

他のヒント

TRY FOLLOWING

<div style="background:url(../top.png) no-repeat;">
  Top
</div>

<div style="background:url(../middle.png)">
  Middle:
</div>

<div style="background:url(../bottom.png) no-repeat;">
  Bottom
</div>

の代わりにクラスを与え、あなたのスタイルシートでそれを処理する

<div class='top'>
</div>
<div class='middle'>
</div>
<div class='bottom'>
</div>
各div別々background CSSのスタイリングを付けます。

<時間>

しかし、私は
の、お勧めします backgroundとdivとともに、テキストbox-shadowにborderスタイリングを与える。
この場合は、あなただけのの真ん中のイメージが必要になります。

これまでのコードを持つことが役立つだろうが、私はそれを旋回を与えるます。

あなたは各画像のコンテナを必要としています。

<div class="head"></div>
<div class="text">TEXT HERE</div>
<div class="foot"></div>

- CSS - 

div.head { 
  background-image:url('top.png');
  background-repeat:no-repeat;
}
div.text {
  background-image:url('middle.png');
  background-repeat: repeat-y;
}
div.foot {
  background-image:url('bottom.png');
  background-repeat:no-repeat;
}

私はおそらく最後の画像と同じ大きさについての最初のイメージを作成し、必要に応じてでは第二の画像の塗りつぶしを聞かせしたいと思う。

私はセスMの答えに考えて、あなたがトップ（ヘッド）＆下（足）のdivのための高さを提供する必要があります。

それが正常に動作します。

div.box:before {content:url(top.png);}
div.box {
  background-image:url(middle.png) repeat-y;
  width:?;
  margin:0;
  padding:0;
}
div.box:after {content:url(bottom.png);}

これは、ボックス内の画像のように上部と下部の写真を置くきちんともの、ですが、常に最初と最後。もちろん、それはあなたがマージンやパディングを持っている場合は、作業をしませんが、あまりにもこれをやってみます：

div.box > div {padding:10px;}

<div class="box"><div>
  Content goes here
</div></div>

これは奇妙な方法の一種で、正確に何をしたいあなたを与える必要があります。古いブラウザは、これらのCSSルールをサポートしていないことを注意してください。

ここであなたが投稿した画像を使用してHTML / CSSでのFULコードです。ヘッダ部分は、むしろ「背の高い」です。私はそれがあなたのデザインの一部だと仮定します。

<html>
<head>
<style type="text/css">
div.top, div.body, div.footer {
margin: 0 auto;
width: 844px;
color: #ffffff;
background-color: #666666;
padding-left: 10px; /* edit accordingly */
}

div.top {
background: url(http://files.droplr.com/files/45544730/INDf3.Page.png) no-repeat;
height: 426px;
}
div.body {
background: url(http://files.droplr.com/files/45544730/INE5i.Page-Tile.png) repeat-y;
height: 200px;
}
div.footer {
background: url(http://files.droplr.com/files/45544730/INFbt.Page-Bottom.png) no-repeat left bottom;
height: 100px;
}
</style>
</head>
<body>
<div class="top">top
</div>
<div class="body">body
</div>
<div class="footer">footer
</div>
</body>
</html>
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top