背景画像 - wicky @ ウィキ

背景画像

　背景に画像を設定するには、background-imageプロパティを利用する。プロパティの値には、画像ファイルのURIを、「url（URI）」という形式で指定する。デフォルトではnoneが設定されている。

●背景画像の設定例

body {
    color : black;
    background-color : white;
    background-image : url(../images/bg.png);
}

<<背景画像の開始位置>>
　背景画像の表示を開始する位置は、background-pasitionプロパティによって設定する。プロパティの値には、背景画像の表示が開始される左上の位置を、横方向の位置、縦方向の位置の順で数値で指定するか、パーセンテージを指定する。プロパティの値を１つしか指定しない場合は、縦方向の位置は中央に設定される。

　また、横方向の位置には、left（左）、center（中央）、right（右）を、縦方向の位置には、top（上）、center（中央）、bottom（下）を指定することができる。

　※デフォルトの位置は、左上（パーセンテージだと、0% 0%）になる。

　※長さの単位については、後述のプロパティ値の単位を参照。

　以下の例では、背景画像を中心に設定している。

●背景画像の位置設定例

body {
    color : black;
    background-color : white;
    background-image : url(../images/bg.png);
    background-position : center;
}

<<背景画像の繰り返し指定>>
　background-repeatプロパティによって、画像を繰り返して表示することができる。

■背景画像の繰り返し表示に関するプロパティ

値	概要
repaet	縦横方向に繰り返し
repaet-x	横方向に繰り返し
repeat-y	縦方向に繰り返し
no-repaet	繰り返しなし

　以下に、背景画像を縦方向に繰り返して表示するための例を示す。

●背景画像の繰り返しの設定例

body {
    color : black;
    background-color : white;
    background-image : url(yoshiwara.gif);
    background-repeat : repeat-y;
    margin-left : 120px;
}

<<背景画像のスクロール>>
　background-attachmentプロパティによって、画面をスクロールした時に背景画像の位置を固定することができる。

■背景画像のスクロールに関するプロパティ

値	概要
fixed	背景画像の位置を固定
scroll	背景画像もスクロール（デフォルト）