html - くっつかない付箋をプログラミング中

Question

テキストの量に応じて長さが変わる自分のサイト用の付箋を作成したいのですが、これらはグラフィックです

http://www.smackjeeves.com/images/uploaded/comics/a/9/a9bb813fajYqH.png

http://img2.smackjeeves.com/images/uploaded/comics/e/a/eafa194f44yHh.png

http://www.smackjeeves.com/images/uploaded/comics/4/f/4fcc68191cLbT.png

いくつかの例を見ましたが、これはdivのcssコードです

 #sticky-note 
 {
  background-image:url('http://www.smackjeeves.com/images/uploaded/comics/a/9/a9bb813fajYqH.png'), 
                   url('http://img2.smackjeeves.com/images/uploaded/comics/e/a/eafa194f44yHh.png'),
                   url('http://www.smackjeeves.com/images/uploaded/comics/4/f/4fcc68191cLbT.png');
  background-position: top, center, bottom;
  background-repeat:no-reapeat, repeat-y, no-repeat;
  padding: 10px;
  max-width: 170px;
  text-align: center;
 }

しかし、それは機能しません。中央のグラフィックを垂直に繰り返し、上部と下部のグラフィックを上部で同じままにしたいのですが、助けてください

Answer 1

上部を含むヘッダー、下部を含むフッター、および中央を拡張するコンテンツの 3 つの個別の div を使用します。