下に伸びる可能性のある文章の背景画像

HTML CSS

ただの四角い背景なら、あんまり関係ないんだけども、
ちょっとしたデザインが入っている背景だと、
内容が下に伸びてきた時、底辺のデザインがかぶってしまったりして
いちいち大きさを変えた画像を用意しなくちゃいけないのか！
という時に使用。


まず、適当な大きさの背景画像を作っていって、
上、真ん中、下の画像としてそれぞれを保存。
widthは後々も変更出来ないので、注意。

今回はこんな感じ。↓

後はCSSで位置を指定していけばOK。

記述例

HTML

  <div class="midle">
    <div class="top">
      <div class="bottom">
        <h1>3枚おろしの術</h1>
        <p>文章が続く</p>
      </ｄdiv><！-- /#bottom -->
    </div><！-- /#top -->
  </div><！-- /#midle -->

CSS

.midle {
width: 493px;
background: url(img/mid.gif) repeat-y;
}

.top {
width: 493px;
background: url(img/top.gif) no-repeat;
padding-top: 20px;
}

.bottom {
width: 453px;
background: url(img/bottom.gif) left bottom no-repeat;
padding-bottom: 10px;
padding-right: 20px;
padding-left: 20px;
line-height: 1.6;
}

つまり、上下の画像は固定しておいて、
真ん中の文章が入る部分だけ伸びていくようにするという事ですね。

しかしながらこれは、ちょっと古い記述方法とも言えるので、
topの部分は何かしらの文(h、p)の背景画像にして、
bottom部分も含めたすごーく長い背景画像を用意して、
文章が伸びたら背景も伸びる、とした方が
文書構造的にはいいと思います。