Webサイト制作における文章などの内容の量に合わせて背景画像の表示範囲（高さ）を自動で変える方法

HTML CSS

Webサイト制作において、更新のたびに量が増えていくような部分に関して、背景画像の表示範囲をその内容の量に合わせて自動で変わっていくようにする方法をまとめておく。

デザインとコーディングの両面での対応が必要となる。

まずはデザイン面から。

背景画像を以下のような、上端（top）、繰り返しのパターンとなる中央部（middle）、下端（bottom）の三つのパーツに分けて準備する。

←クリックで拡大表示
←クリックで拡大表示
←クリックで拡大表示

画像の準備ができたら、続いてコーディング。

HTMLには上記３つのパーツにそれぞれ対応する３つのdivタグを入れ子にして記述する。
入れ子の順番は外側からmiddle、top、bottomの順にclass名（またはid名）を設定しておく。

コードは以下の通り。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>背景画像高さ自動調整</title>
<style>
h1 {
  margin: 0;
  padding: 0;
}
.mid {
  width:486px;
  background:url(img/mid.gif) repeat-y;
  }
.top {
  width:486px;
  background:url(img/top.gif) no-repeat;
  padding-top:20px;
}
.bottom {
  width:426px;
  line-height: 1.5;
  padding: 0 30px 20px 30px;
  background:url(img/bottom.gif) left bottom no-repeat;
}
</style>
</head>
<body>
<div class="mid">
<div class="top">
<div class="bottom">
<h1>8月の予定</h1>
<p>8月は太平洋側から東北をぐるっと廻ってお祭巡り。そのまま新潟を抜けて、道中はおいしいものを食べながら北陸も抜けて京都の天橋立まで。そのあとは気ままに鳥取砂丘を見て出雲大社を見て、下関まで行っておいしいふぐ料理を食べる。下関で折り返して帰りは山陽方面。広島でお好み焼き食べて岡山で地ビールの独歩を飲んで、神戸でおいしいお土産を買う。ここらへんで疲れてきたから残りは新幹線で東京まで。こんな旅行はさすがにもうできないかな。</p>
</div>
</div>
</div>
</body>
</html>

コードを見れば分かることだが、middle部の背景を高さ1〜2px程度にして上から下まで繰り返し、
その上に上端パーツと下端パーツをかぶせている（CSSの.top部または.bottom部にvisibility:hiddenを指定することで確認できる）。

ポイントはCSSで.bottomのbackgroundの位置に「left bottom」を指定すること。

また、上記の通りかぶせているということから、画像制作時に1点注意が必要となる。

背景画像の上下端が上記例のように角丸などになっていて、上記３つのdivタグの更に外側の背景部が見えてしまう場合、あらかじめその外側の背景色で上下パーツの角の部分を塗りつぶしておく必要がある。

この際、gifなどで角を透明にしてしまうと、上下パーツの下にあるmiddle部の繰り返し画像が見えてしまうため、透明もNGとなる。

完成形の表示結果は以下の通り。
←クリックで拡大表示