§01-10…背景画像の表示位置

(01) フォルダー内に「sakura01.jpg」をコピーしておきましょう。

(sakura01.jpg 343×232)
(02) 背景色を白にし、かつ「sakura01.jpg」を背景画像に採用します。繰り返しはしません。CSSのbodyセレクタ内を以下のように更新してください。更新後はWebページをブラウジングしてください。

body{
background-color:#FFFFFF;
background-image:url(sakura01.jpg);
background-repeat:no-repeat;
}

(03) 背景画像を繰り返さない場合には、背景の位置は左上になります。背景を画面中央にしたり、右下に配置させたりするには「background-position」プロパティに値を指定します。右上に配置させる場合には「right top」とします。CSSのbodyセレクタ内を以下のように更新してからWebページをブラウジングしてください。

body{
 background-color:#FFFFFF;
 background-image:url(sakura01.jpg);
 background-repeat:no-repeat;
 background-position:right top;
 }

(04) 「background-position」プロパティに採用できる値は以下の9パターンです。[left]は「左」、[right]は「右」、[center]は「中央」、[top]は「上」、[bottom]は「下」です。

(05) 背景画像の位置を端以外の場所にセットすることもできます。今回は左と右の余白の広さが8:2になるようにします(上のまま)。「80%　top」のように、左(または上)の余白の割合を指定します。

body{
 background-color:#FFFFFF;
 background-image:url(sakura01.jpg);
 background-repeat:no-repeat;
 background-position:80% top;
 }

(06) 今度は下に揃えてみます。

body{
 background-color:#FFFFFF;
 background-image:url(sakura01.jpg);
 background-repeat:no-repeat;
 background-position:80% bottom;
 }

(07) さて、ウィンドウのサイズを下に拡張してください。背景の最下部は最後のコンテンツ位置(～寝ていますね。)まで拡張されていますが、ウィンドウの最下部ではないことに注意してください。