グレートブロガー養成講座！可能性が広がる魅力的なブログの作り方とは？ -9ページ目
- CSSの簡単な説明（CSSの基本を最初にお読みいただく方が良いかと思います。）
- 背景画像の並べかたを設定します。
- background-repeatプロパティに指定する値は『repeat』（これが規定値で縦横にタイル上に敷き詰める），『repeat-x』（横方向のみ並べる），『repeat-y』（縦方向のみ並べる），『no-repeat』（ひとつだけ表示する）といったキーワードを指定します。
例えば、繰り返さずにひとつだけ表示する場合
background-repeat:no-repeat;
のように記述します。
- 値の継承はしません
- CSSの簡単な説明（CSSの基本を最初にお読みいただく方が良いかと思います。）
- ウィンドウのスクロールにあわせた背景の動作を設定します。
- background-attachmentプロパティに指定する値は
『scroll』（これが規定値でウィンドウのスクロールに合わせて背景画像が移動します），
『fixed』（スクロールせず背景画像が固定される）
といったキーワードを指定します。
使用する機会が多いのは『fixed』だと思います。
background-attachment:fixed;
- 値の継承はしません
- CSSの簡単な説明（CSSの基本を最初にお読みいただく方が良いかと思います。）
- 背景画像の表示位置を設定します。
- background-positionプロパティに指定する値は
スペースで区切って横方向と縦方向の位置を指定します。
px（ピクセル）などの一般的な単位を付けた数値での指定か、
%を付けた数値での割合で指定
（この割合は表示領域の指定割合の位置と画像の指定割合の位置を合わせる位置になります）
が出来ます。
※負の値を指定することも出来ます。
また、横方向の位置を『left』（これが規定値で0%を指定した時と同じ），『center』（50%を指定した時と同じ），『right』（100%を指定した時と同じ）を
縦方向の位置を『top』（これが規定値で0%を指定した時と同じ），『center』（50%を指定した時と同じ），『bottom』（100%を指定した時と同じ）といったキーワードで指定することも出来ます。
- 左上（これは規定値なのでbackground-positionプロパティを指定していない場合は左上を指定していることになります）に表示する場合は
background-position:left top;
もしくは
background-position:0% 0%;
- 中央に表示する場合は
background-position:center center;
（キーワード指定の場合は縦か横の一方を指定した場合はもう一方はcenterと解釈されるので、この場合centerを一つ指定するだけでも良い）
もしくは
background-position:50% 50%;
（数値をひとつ指定した場合は、数値は横方向を指定していることになり『数値 center』と解釈されるので、この場合50%を一つ指定するだけでも良い）
- 右下に表示する場合は
background-position:right bottom;
もしくは
background-position:100% 100%;
- キーワード指定（top bottomやleft rightとcenter）では縦か横の一方を指定した場合はもう一方はcenterと解釈されます。
- %指定やpx指定の場合（数値での指定）は位置を細かく指定できます。
- 負の値も指定することが出来ます。
- 要素の左上（パディングの部分）が起点になります。
- 数値をひとつ指定した場合は、数値は横方向を指定していることになり
『数値 center』と解釈されます。
background-attachmentプロパティ
で表示位置が固定指定されている場合は
表示領域の左上が起点になります。
- 値の継承はしません
