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

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

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

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

背景画像の表示位置を制御する

HTMLでは、背景画像の表示位置を具体的に指定することは無理です。 余白を含めた大きな画像を用意して表示させることで、左上を基準にして特定の座標に表示させることは可能ですが、 それでは「中央」や「右下」「右上」「左下」などの指定ができません。

スタイルシートでは次のようなことが可能です。

  • 上から50ピクセル左から30ピクセルの位置に表示
  • 上から30%・左から40%の位置に表示
  • 右上に表示
  • 右下に表示
  • 中央に表示

位置に関しては、かなり自由自在に指定できます。

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

(背景画像サンプル2)

▼左35px,上10%&リピートなし ▼中央に表示&リピートなし
(background-repeat: no-repeat; background-position: 35px 10%;) (background-repeat: no-repeat; background-position: center;)
▼右下に表示&リピートなし ▼右上に表示&リピートY
(background-repeat: no-repeat; background-position: right bottom;) (background-repeat: repeat-y; background-position: right top;)

この指定を実現する方法は、以下の通りです。

background-positionプロパティを使う

スタイルシートに次の「background-position」プロパティを使った指定を加えます。

background-position: 50px 30px;     …(左50px,上30px)
background-position: 30% 40%;       …(左30%,上40%)
background-position: right bottom;  …(右下)
background-position: center center; …(中央)

この background-position プロパティには、横方向位置・縦方向位置の順番で2つの値を指定します。 値には、

実数値 50px 3em 12pt など
割合 50% 65% 80% など
位置キーワード left right center top bottom

……の記述方法があります。

位置キーワードの場合、 「right bottom」と指定すれば「右下」になりますし、 「left center」と指定すれば「左端の中央」、 「center top」と指定すれば「上端の中央」になります。

ただし、「left 30%」のように、キーワードと数値を混在させた指定はできません。キーワード同士か数値同士の指定のみ可能です。数値での指定の場合なら、実数値と割合の混在は可能です。

※注意:
background-positionプロパティだけを指定すると、背景画像はタイル状に繰り返して表示されます。 画像を1点だけに表示させたい場合には、同時に前ページでご紹介した「background-repeat」プロパティで値に「no-repeat」を指定して、「繰り返さない」指定を追記する必要があります。
また、スクロールバーが出るほど長いページの場合は、次のページでご紹介する「背景画像を固定する方法」も同時に用いないと望み通りにならない場合もあります。

このプロパティを使うことで、先ほどの

  • ウインドウの中央に1つだけ画像を表示
  • ウインドウ右下にマスコットを表示

という希望は実現しますね。
前者は、

background-position: center center;
background-repeat: no-repeat;

と記述し、後者は、

background-position: right bottom;
background-repeat: no-repeat;

と記述することで実現できます。

背景画像のスクロールを制御する

さて、次に、画像をスクロールさせず、固定させておく方法をご紹介致しましょう。
また、最後にはユーザビリティ上も重要になる背景色の指定方法と、背景関連の指定を一括して記述する方法もご紹介致します。

では、次のページへ →

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

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

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