ホームページ作成/HTML・スタイルシート(CSS)の基礎

CSSで背景画像の表示方法を自在に指定(2ページ目)

無条件でタイル状に並べてしまう背景画像の表示形態に満足していますか? 右端だけに表示したり、中央に1つだけ表示したり、右下にマスコットを表示したり。様々な背景画像表示方法をご紹介。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

スタイルシートでの壁紙指定の基礎

まず、スタイルシートで背景画像を指定する際の記述方法についてご紹介致しましょう。

background-image: url("画像ファイル名");

と記述します。
p要素(段落)やdiv要素(ボックス)など、多くの要素に対して使用できます。 例えば「 p要素 」に対して指定すれば、特定の段落にだけ背景画像を加えるといったことも可能です。

次のようにbody要素に指定すれば「ページ全体の背景画像」として表示されます。(表示に使う画像が img.gif の場合)

<body style="background-image: url('img.gif');">

※注意:
style属性を使って要素内にスタイルシートを記述する際、ファイル名を囲む記号には「シングルクオーテーション(')」を使います。 「ダブルクオーテーション(")」は使えませんので注意して下さい。 (ダブルクオーテーション記号は「style属性」全体を囲むために使用しているからです。)

スタイルシートでは、HTMLのようにいきなりファイル名を記述するのではなく、

url(" /directory/filename.gif ")

のように記述し、「/directory/filename.gif」の部分にファイル名を記述します。 ファイル名の指定は、フルパスでも相対パスでも構いませんし、URLを書いても構いません。

背景画像の並べ方を制御する

さて、背景画像の並べ方を指定する方法をご紹介致します。
HTMLでは無条件にタイル状に並べられてしまいますが、スタイルシートでは次の4つの指定が可能です。

  • タイル状に並べる(HTMLと一緒)
  • 縦方向にだけ繰り返す
  • 横方向にだけ繰り返す
  • 繰り返さない

次のような画像を用いた場合に、どのような表示になるのかを見てみましょう。

サンプル壁紙(赤色チェック柄)

▼タイル状に並べる ▼縦方向にだけ繰り返す
(ウインドウイメージ) (ウインドウイメージ)
▼横方向にだけ繰り返す ▼繰り返さない
(ウインドウイメージ) (ウインドウイメージ)

これらを実現する具体的な記述方法は、以下の通りです。

background-repeatプロパティを使う

スタイルシートには、背景画像を指定する「background-image」プロパティのほかに、 背景画像の繰り返し方法を指定する「background-repeat」プロパティが用意されています。 このプロパティには4種類の値があり、以下のような表示になります。

(1) background-repeat: repeat;    縦横にタイル状に並ぶ
(2) background-repeat: repeat-x;  横方向にのみ繰り返す
(3) background-repeat: repeat-y;  縦方向にのみ繰り返す
(4) background-repeat: no-repeat; 繰り返さず1つだけ表示

何も指定しなければ、(1)の「repeat」を指定したと解釈され、タイル状に縦横に繰り返して並べられます。
例えば、img.gif という画像を「縦方向にのみ繰り返す」(=左端にだけ表示する)には、次のように記述します。

<body style="background-image: url('img.gif'); background-repeat: repeat-y;">

このプロパティを使うことで、どんな画像でも、

  • 左端にだけ表示させたい
  • 上端にだけ表示させたい

というような希望は実現できます。
従来の(HTMLで工夫していた)ように、右方向もしくは下方向に長い余白の加えられた画像を使用する必要はなくなります。

右端や下端に表示させたい場合は?

さて、上記の background-repeat プロパティは、「背景画像の繰り返しを制御」するためのものですので、 「右端」や「下端」に表示させたいというような場合には不足です。

それでは、次に、その望みを叶えてくれる「表示位置に関する指定方法」をご紹介致します。

それでは、次のページへ →

  • 前のページへ
  • 1
  • 2
  • 3
  • 4
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます