HITP 広島工業大学専門学校

ホームページの基礎（2. CSS 編）

← 2.12 ボックスモデル（ボーダー）  CSS総目次  2.14 視覚表現 →

  1. 2.13 背景画像
    1. 2.13.1 background-imageプロパティ
    2. 2.13.2 background-repeatプロパティ
    3. 2.13.3 background-attachmentプロパティ
    4. 2.13.4 background-positionプロパティ
    5. 2.13.5 backgroundプロパティ

2.13 背景画像

背景に関するプロパティの中で，"background-color"については，すでに説明しました。このページでは，「背景画像」に関するプロパティについて説明します。

2.13.1 background-imageプロパティ

背景画像は，「background-imageプロパティ」によって指定します。その書式は以下のとおりです。

background-imageプロパティ
値<uri> | none | inherit
初期値none
適用対象すべての要素
継承しない
パーセント値受けつけない
<uri>
背景画像へのURI(※ URIとは，URL(Uniform Resource Locators)とURN(Uniform Resource Name)を合わせた概念です。)を指定します。URIの指定は，url()関数形式で指定します。 
url(URI)
このときURIの部分は，引用符で囲んでも囲まなくてもよい。つぎに示す例はすべて同じ意味となります。 
url(images/back.jpg)
url('images/back.jpg')
url("images/back.jpg")
none
背景画像を使用しないことを意味します。

つぎに例を示します。まずは，以下のような背景画像を例に考えてみましょう。

背景画像のサンプル

そして，この背景画像をbody要素に指定したスタイルシートをつぎのように記述します。

body {
    color: #ff0;
    background-color: #000;
    background-image: url(images/back.jpg);
}

さらに，そのスタイルシートを適用するXHTMLのサンプルを次のように記述します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>background-imageプロパティ</title>
    <link rel="stylesheet" href="test.css" type="text/css"/>
</head>
<body>
    <p>
    abcdefg abcdefg abcdefg abcdefg abcdefg
    abcdefg abcdefg abcdefg abcdefg abcdefg
    abcdefg abcdefg abcdefg abcdefg abcdefg
    abcdefg abcdefg abcdefg abcdefg abcdefg
    abcdefg abcdefg abcdefg abcdefg abcdefg
    abcdefg abcdefg abcdefg abcdefg abcdefg
    abcdefg abcdefg abcdefg abcdefg abcdefg
    abcdefg abcdefg abcdefg abcdefg abcdefg
    abcdefg abcdefg abcdefg abcdefg abcdefg
    abcdefg abcdefg abcdefg abcdefg abcdefg
    </p>
</body>
</html>

このときの表示結果は，以下のようになります。つまり，指定した背景画像で表示領域を埋め尽くします。

サンプル表示（background-imageプロパティ）

CSS総目次 | ページ先頭に戻る

2.13.2 background-repeatプロパティ

「background-repeatプロパティ」は，指定された背景画像をどのように配置するか，その配置方法を指定します。その書式は以下のとおりです。

background-repeatプロパティ
値repeat | repeat-x | repeat-y | no-repeat | inherit
初期値repeat
適用対象すべての要素
継承しない
パーセント値受けつけない
repeat
キーワード「repeat」は，指定された背景画像を上下左右に繰り返し配置します。前述のスタイル指定による表示結果がrepeat指定の例です。
repeat-x
キーワード「repeat-x」は，横方向にのみ背景画像を繰り返して配置します。前述のスタイルをつぎのように変更して，表示した結果を示しておきます。 
body {
    color: #ff0;
    background-color: #000;
    background-image: url(images/back.jpg);
    background-repeat: repeat-x;
}

背景画像の横方向への繰返し配置

repeat-y
キーワード「repeat-y」は，縦方向にのみ背景画像を繰り返して配置します。前述のスタイルをつぎのように変更して，表示した結果を示します。 
body {
    color: #ff0;
    background-color: #000;
    background-image: url(images/back.jpg);
    background-repeat: repeat-y;
}

背景画像の縦方向への繰返し配置

no-repeat
キーワード「no-repeat」は，背景画像の繰り返し配置を行いません。つまり，背景画像がひとつだけ表示されます。前述のスタイルをつぎのように変更して，表示した結果を示しておきます。 
body {
    color: #ff0;
    background-color: #000;
    background-image: url(images/back.jpg);
    background-repeat: no-repeat;
}

背景画像の繰返しをしない配置

CSS総目次 | ページ先頭に戻る

2.13.3 background-attachmentプロパティ

「background-attachmentプロパティ」は，指定された背景画像のスクロール状態を指定します。その書式は以下のとおりです。

background-attachmentプロパティ
値scroll | fixed | inherit
初期値scroll
適用対象すべての要素
継承しない
パーセント値受けつけない
scroll
キーワード「scroll」は，指定された背景画像を文書とともにスクロールします。 
body {
    color: #ff0;
    background-color: #000;
    background-image: url(images/back.jpg);
    background-repeat: no-repeat;
    background-attachment: scroll;
}
fixed
キーワード「fixed」は，指定された背景画像を表示位置に固定します。つまり，スクロールはしません。 
body {
    color: #ff0;
    background-color: #000;
    background-image: url(images/back.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;

}

scrollとfixedの画面表示おける違いの例を以下に示しておきます。

scrollとfixedの画面表示おける違い

CSS総目次 | ページ先頭に戻る

2.13.4 background-positionプロパティ

「background-positionプロパティ」は，指定された背景画像の初期表示位置を指定します。繰返し配置する場合は，その位置を基準として縦方向あるいは横方向に繰り返されます。書式は以下のとおりです。(※ この書式は，"CSS 2.1"のプロパティです)

background-positionプロパティ
値[[<％値> | <長さ> | left | center | right][<％値> | <長さ> | top | center | bottom]?] |
[[left | center | right] || [top | center | bottom]] | inherit
初期値0% 0%
適用対象すべての要素
継承しない
パーセント値ボックス自身に対する割合
<％値>
このプロパティ自身が指定された要素のボックスサイズに対する比率を指定します。１つ目の指定は水平位置，２つ目の指定は垂直位置を表します。
  • "0% 0%"と指定した場合，「背景画像の左上端」を「パディング領域の左上端」に揃えます。
  • "100% 100%"と指定した場合，「背景画像の右下端」を「パディング領域の右下端」に揃えます。
  • "30% 40%"と指定した場合，「背景画像の左端」から"30%"，「背景画像の上端」から"40%"の位置を「パディング領域の左端」から"30%"，「パディング領域の上端」から"40%"の位置に揃えます。
また，<％値>が１つしか指定されていない場合は，水平位置となり，垂直方向は"50%"となります。
<長さ>
単位付き数値で，パッディング左上端を基準に，その基点からの長さを指定します。１つ目の指定は水平位置，２つ目の指定は垂直位置を表します。"％値"と異なり，画像の大きさは参照しません。また，<長さ>が１つしか指定されていない場合は，水平位置を表し，垂直方向は"50%"となります。
top，center，bottom
垂直位置を表すキーワードで，つぎのような対応関係があります。
  • 「top」：0%
  • 「center」：50%
  • 「bottom」：100%
また，垂直方向のキーワードのみが指定されている場合は，水平位置は"50%"となります。
left，center，right
水平位置を表すキーワードで，つぎのような対応関係があります。
  • 「left」：0%
  • 「center」：50%
  • 「right」：100%
また，水平方向のキーワードのみが指定されている場合は，垂直位置は"50%"となります。

いくつかの例を見てみましょう。まずは，％値によるスタイル指定と，それを適用した画面表示を示します。

body {
    color: #ff0;
    background-color: #000;
    background-image: url(images/back.jpg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

background-positionプロパティ（サンプル１）

つぎの例は，"50% 50%"に配置された背景画像を縦方向に繰返すスタイル指定と，その表示結果です。

body {
    color: #ff0;
    background-color: #000;
    background-image: url(images/back.jpg);
    background-repeat: repeat-y;
    background-position: 50% 50%;
}

background-positionプロパティ（サンプル２）

最後に"長さ"によるスタイル指定と，その表示結果を示します。

body {
    color: #ff0;
    background-color: #000;
    background-image: url(images/back.jpg);
    background-repeat: repeat-y;
    background-position: 50px 0px;
}

background-positionプロパティ（サンプル３）

CSS総目次 | ページ先頭に戻る

2.13.5 backgroundプロパティ

「backgroundプロパティ」は，背景色"background-color"，背景画像"background-image"，背景画像の繰返し"background-repeat"，背景画像のスクロール指定"background-attachment"，背景画像の配置位置"background-position"を一括指定するための簡略記法です。その書式は以下のとおりです。

backgroundプロパティ
値[[<'background-color'> || <'backgroound-image'> || <'background-repeat'>||
<'background-attachment'> || <'background-position'>] | inherit
初期値各プロパティを参照
適用対象すべての要素
継承しない
パーセント値background-positionプロパティの値としてのみ有効

例えば，つぎのようなスタイルがある場合，

body {
    color: #ff0;
    background-color: #000;
    background-image: url(images/back.jpg);
    background-repeat: repeat-y;
    background-position: 50px 0px;
}

これを"backgroundプロパティ"で記述すれば，以下のようになります。

body {
    color: #ff0;
    background: #000 url(images/back.jpg) repeat-y 50px 0px;
}

CSS総目次 | ページ先頭に戻る

(C)Copyright 2010 HIROTAKA.YAMASHITA. HITP 広島工業大学専門学校. All Rights Reserved.