ブロックの背景

H2 や p タグの背景画像

背景は body だけでなく,h1 や p にも使えます。たとえば,この上の H2 タグは、

h2 {
  background-color: #f0f000;
  background-image: url(images/yeltile.png);
  }

というようにしたものです。このように body と同様に指定することができます。yeltile.png が画像ファイルの名前です。やはり画像が表示できない時のために背景色を似た色に設定しています。 body に画像があっても上書きされます。

つぎに p の背景に redsq.jpg という画像を使ってみます。

p {
  margin: 1.5% 5% 1.5% 8%;
  background-color: #fff0f0;
  background-image: url(images/redsq.png);
  }

ここは p に上記のように背景画像を指定した場合のサンプルです。margin の部分を除いて画像が張り付けられます。小さな画像は繰り返します。

h2 や p などのブロックの背景が有効になる範囲は、margin の部分を除いた部分です。margin の部分には body の背景が適用されます。これは、以前勉強した background-color の範囲と同じです。下図では黄色の部分にそのブロックの背景が表示され、緑の矢印がある部分はbodyの背景が(あれば)表示されます。

背景の範囲

padding

H1 や p などブロック要素の背景画像は margin の部分を除いて画像が張り付けられますが、場合によっては背景画像の境界線と文字の間に隙間がほしくなるかもしれません。この隙間をpaddingといいます。この場合,次のように指定します。

p {
  margin: 1.5% 5% 1.5% 8%;
  background-color: #fff0f0;
  background-image: url(images/redsq.png);
  padding: 0.5em 1em 0.5em 1em;
}

これで上下は半文字分、左右は1文字分の隙間ができています。padding は「詰め物」という意味です。指定の方法は margin と同様で、上右下左の順に書いていきます。

もちろん、単位として%を使用してもかまいません。

paddingの範囲

見出しの上の画像

h2.upbg {
  background-color:#eeffcc
  background-image: url(images/ninjin0.gif);
  background-repeat:repeat-x;
  padding-top:18px;
}

見出しの下の画像

h2.upbg {
  background-color:#eeffcc
  background-image: url(images/ninjin0.gif);
  background-repeat:repeat-x;
  background-position:bottom;
  padding-bottom:18px;
}

聖愛高等学校
http://www.seiai.ed.jp/