継続は力なり＃１７

2020年3月15日 12:34

背景を指定する

背景画像の表示位置を指定する

「background-position プロパティ」を使用すると背景画像の表示位置を指定できる

background-positionプロパティの値が「no-repeat」の場合（背景画像を1つだけ表示させる場合）は背景画像がその位置に表示されるが、背景画像を繰り返して表示させる場合、その位置を起点として縦・横に繰り返されることになる

以下のものが指定できる

background-positionに指定できる値

・単位付きの実数
表示位置を単位付きの実数の指定

・パーセンテージ
表示位置をパーセンテージで指定

・top, bottom, left, right, center
表示位置をキーワードで指定する
topは縦方向の「0％」、bottomは「100％」と同じ
leftは横方向の「0％」、rightは「100％」と同じ
centerは縦方向・横方向の「50％」と同じ

表示位置は、横方向・縦方向の順に半角スペースで区切って2つ指定する（ただし、値をキーワードのみで指定する場合は、順番は逆でも問題ない）

値を1つしか指定しなかった場合、もう一方に「center」が指定されたものとして処理される

表示位置の原点

表示位置の原点は、パンディング領域の左上

パンディング領域の左上に背景画像の左上がぴったり重なった状態が「0px 0px」「0% 0%」「left top」になる
パンディング領域の右下に背景画像の右下がぴったり重なった状態は「100% 100%」「right bottom」になる
背景画像がパンディング領域の中央にある状態は「50% 50%」「center center」になる

値を「単位付きの実数」で指定した場合、横方向はパンディング領域の左から背景画像の左までの距離、縦方向はパンディング領域の上から背景画像の上までの距離になる

値を「パーセンテージ」で指定した場合、横方向・縦方向とともにパンディング領域のその％のポイントと背景画像のその％のポイントを重ねた状態になる位置に表示される

値を数値で指定する場合、マイナスの値も指定できる

背景画像の表示例

背景画像をページ全体の中央に表示させる例

HTML

・・・
<body>
 
</body>
</html>

CSS

html, body {
   margin: 0;
}
body {
   background-image: url(images/cloud.jpg);
   background-repeat: no-repeat;
   background-position: center;
}

背景画像は横方向の中央には配置されているが、縦方向は「マイナスの数値」を指定した状態になっている

background-position プロパティの値には「center」だけの指定になっているので「center center」の指定と同じ表示結果になる
上記の背景画像は指示通りに動いていて、body要素の縦横の中央に表示されてるいる

ここでは、body要素の内容が空なので、body要素の高さが０となっていて、高さが０のボックスの中央に合わせて表示される
よって上記の画像のような結果になる

body要素の高さを「100％」にすればよいが、高さをパーセンテージで指定する場合、それを含む要素にも高さを指定する必要がある

以下を指定することで背景画像はページの中央にくる

例

HTML

・・・
<body>
 
</body>
</html>

CSS

html, body {
   margin: 0;
   height: 100%;
}
body {
   background-image: url(images/cloud.jpg)
   background-repeat: no-repeat;
   background-position: center;
}

背景画像をウィンドウに固定する

ページをスクロールすると、通常はコンテンツと一緒に背景画像もスクロールする

「background-attachment」の値として「fixed」を指定すると背景画像は、ウィンドウ上に固定され、スクロールしても動かなくなる

background-attachmentに指定できる値

・scroll
背景画像は他のコンテンツと一緒にスクロールする

・fixed
背景画像をウィンドウ上に固定して、スクロールしても動かない

background-attachmentプロパティの値として「fixed」を指定すると、background-positionプロパティでの配置の指定対象となる領域が「パンディング領域」ではなく「ウィンドウの表示領域（見えている領域）全体」となる

背景画像を固定した例

背景画像を繰り返しなしで右下に配置して、background-attachmentプロパティの値を「fixed」にした例
スクロールしても背景画像の位置は変わらない

例

HTML

<p>
ウィンドウを小さくして、画像をスクロールしてみてください
</p>
<p>
テキストは移動するが右下のシーサーは固定されたまま動かない
</p>

CSS

body {
   margin: 50px 200px 0 50px;
   background-image: url(images/shiisa.png);
   background-repeat: no-repeat;
   background-position: right bottom;
   background-attachment: fixed;
}

数値が「０」のときは単位を省略できる

先程のサンプルの「marginプロパティ」の値の中に、単位のついていない値が混じっていた

body {
   margin: 50px 200px 0 50px;
   ・・・
}

ここでの「０」での部分に当たる

値が「単位付きの実数」であっても、その値が「０」である場合には単位を省略できる

今後のサンプルでも、値が「０」の場合には基本的に単位を省略する