枠線の真下に描画される背景画像のずれを調整する方法

背景画像は、実は枠線(border)の真下にも描画されている

background-imageプロパティなどを使ってボックス内に背景画像を掲載しているとき、このボックスにborderプロパティで枠線を引くと、例えば右図のように表示されます。ここでは、分かりやすいように太めの枠線(緑色)を引いています。

この状態では特に何の問題もありません。しかし、枠線の色を半透明にしたり、線種を点線などにしてみると、背景画像がずれているように感じられることがあります。

右図は、先ほどの枠線の色を半透明に変えてみた例です。枠線が半透明になった結果、枠線の真下にある部分も透けて見えています。このように、実は「枠線の真下」にも背景画像は描画されているのです。

しかし、背景画像の表示開始位置(＝背景画像がタイル状に繰り返される基点)が「枠線の内側」にあるため、背景画像がずれているように見えてしまいます。

背景画像と、描画範囲・描画開始位置の関係

1つのボックスの構造は、右図に示す通り、外側から順に以下の4つの部分で構成されています。

1. margin（マージン／外側の余白）
2. border（ボーダー／枠線）
3. padding（パディング／内側の余白）
4. content（コンテント／内容）

ボックスに背景画像を指定した場合、標準では上記の「2」～「4」の領域に描画されます。しかし、描画の開始位置は「3」の端です。この背景の描画に関して、「(A)描画範囲」と「(B)描画開始位置」の仕様を、以下に簡単にご紹介しておきます。

(A) 背景の描画範囲：
背景色や背景画像が描かれる範囲は、右図の赤色斜線で示した範囲です。枠線(border)部分も含む「枠線の内側」です。

背景画像が描かれないのは「枠線より外側」だけです。したがって、枠線そのものの部分(枠線の真下)にも背景画像は描かれます。枠線を「不透明な実線」で描くと見えませんが、線種を点線や二重線にしたり、線色を半透明にすると見えます。

(B) 背景画像の描画開始位置：
背景画像が描かれ始める座標は、右図の赤丸で示した場所です。先ほどの「描画範囲」の場合とは異なり、枠線(border)部分を含まない「内側の余白(padding)の左上」です。

したがって、「枠線の真下」には、描画開始座標を基準にしてタイル状に繰り返された部分が表示されます。

上記(A)・(B)の仕様のため、「背景画像が指定されたボックス」に「半透明の枠線」などを加えると、冒頭の例のように、背景画像がずれているように見えてしまうのです。

CSS3を使えば、背景画像の描画範囲や描画開始座標を変更できる

これらの仕様は、CSS3の各種プロパティを使うことで、以下のように変更できます。

■背景画像の描画開始位置を、枠線(border)の端に合わせる
ずれる原因の1つは、背景画像の描画開始位置が「内側の余白(padding)の左上」になっていることなのですから、この座標を「枠線(border)の左上」に変更すればずれを防げます。右図はそのように変更してみた例です。枠線を半透明にしても、背景画像がずれているようには見えません。

この「背景の描画開始位置」は、CSS3のbackground-originプロパティで指定できます。

■背景画像を、枠線(border)部分には描かないようにする
ずれる原因のもう1つは、背景画像が「枠線の真下」にも描かれる点なのですから、描画範囲をもっと狭めて「枠線の真下には描かない」ようにすることでも、ずれを防げます。

右図では、分かりやすいように「ページ全体の背景」に模様を加えています。半透明の枠線部分には、「ボックスの背景写真」ではなく「ページの背景模様」が見えています。

この「背景の描画範囲」は、CSS3のbackground-clipプロパティで指定できます。

今回は、上記でご紹介したように、背景画像の表示範囲や表示開始位置を調整することで、背景画像がずれているように見えてしまうことに対処する方法をご紹介致します。これらの方法を使えば、デザインの際に「複数のボックスを重ねて工夫する」などの面倒な試行錯誤の必要を減らせるかもしれません。

それでは次のページから、背景画像の描画範囲や描画開始位置を指定するCSSの記述方法を見ていきましょう。