- 背景画像を指定
-
background-image:url("画像URL");
背景に
を指定→サンプル
※これにプラスして以下のような指定が可能です。
- ＋リピート指定
-
background-repeat:○○;
※種類
repeat-x X軸、横方向に繰り返し。
repeat-y Y軸、縦方向に繰り返し。
no-repeat 繰り返さずに一つだけ表示。
横一列→サンプル
指定しない場合は敷き詰めて表示されます。
- ＋ポジション指定
-
background-position:○ ○;
※背景の位置を指定します。
left、center、right、●%のどれかで横軸。
top、center、bottom、●%のどれかで縦軸を指定。
no-repeaにした場合、right top(画面右上)とか、%を使って(100% 0%で右上)好きな場所に指定出来ます。
repeat-yで縦指定した場合などは、横軸(サンプルはright)のみ記述します→サンプル
- ＋画像を固定
-
background-attachment:fixed;
画面スクロール時に画像を固定したい場合に指定します→サンプル
- 背景色を指定
-
background-color:○;
背景色を指定します→色々サンプル
- 背景一括指定
-
background:○;
実は今までの指定は一括で書くことも出来ます。
上の、background-●●:○○;の「○○」だけを半角スペースで区切って一度に記述します。
こんな感じ→「background:背景色 url("画像URL") repeat指定 ○% ○% fixed;」。この方が文字数は少なくて済みますね。
→サンプル