今回は、CSSのbackgroundの使い方について解説していきます。
CSSのbackgroundというと、以下の表のように『backgroud-image』や『background-position』など色々とありますが、
今回は、背景関連の設定をまとめて設定する『background』の使い方に関して解説したいと思います。
また、他のbackgroundに関しては、手短に解説しますが、
もっと詳しく知りたいという方は、各項目にリンクを貼っておくのでそちらからぜひ！
| background-color | 背景色を設定する |
| background-image | 表示する背景画像を設定する |
| background-size | 背景画像の表示サイズを設定する |
| background-clip | 背景画像の表示領域を設定する |
| background-origin | 背景画像の基準位置を設定する |
| background-attachment | スクロール時の背景画像の表示方法を設定する |
| background-position | 背景画像の水平・垂直方向を設定する |
| background-repeat | 背景画像の繰り返しを設定する |
| background | 今までの背景関連の設定をまとめて指定する |
目次
backgroundの使い方
backgroundは、背景関連の設定をまとめて指定するcssです。
そこで、まずは、背景関連の設定には、どのようなcssがあるのかを、手短に解説したいと思います。
そんなことはいいから、まとめて設定するbackgroundの方法だけ知りたい！
という方は、飛ばしていただいて大丈夫です！
background-color
background-colorは、背景の色を設定するときに使用するプロパティです。
使用方法は、以下になります。
background-color: #333;
詳しくは、以下の記事をご覧ください。
background-image
background-imageは、背景に表示する画像を設定するときに使用するプロパティです。
使用方法は、以下になります。
background-image: url("画像のパスを書く");
詳しくは、以下の記事をご覧ください。
background-size
background-sizeは、背景画像の表示サイズを設定するときに使用するプロパティです。
使用方法は、以下になります。
background-size: cover;
詳しくは、以下の記事をご覧ください。
background-clip
background-clipは、背景画像の表示領域を設定するときに指定するプロパティです。
使用方法は、以下になります。
background-clip: border-box;
詳しくは、以下の記事をご覧ください。
background-origin
background-clipは、背景画像の基準位置を設定するときに指定するプロパティです。
使用方法は、以下になります。
background-origin: border-box;
詳しくは、以下の記事をご覧ください。
background-attachment
background-attachmentは、スクロール時の背景画像の表示方法を設定するときに指定するプロパティです。
使用方法は、以下になります。
background-attachment: fixed;
詳しくは、以下の記事をご覧ください。
background-position
background-attachmentは、背景画像の水平・垂直方向を設定するときに指定するプロパティです。
使用方法は、以下になります。
background-position: top;
詳しくは、以下の記事をご覧ください。
background-repeat
background-attachmentは、背景画像の繰り返しを設定するを設定するときに指定するプロパティです。
使用方法は、以下になります。
background-repeat: no-repeat;
詳しくは、以下の記事をご覧ください。
backgroundの設定方法
今まで紹介したbackgroundを一括で設定する『background』の使い方について解説します。
結論から言うと、『background: attachment image position/size repeat origin clip;』のように記載していきます。
特に順番は決まっていませんが、以下のことに注意してください！
注意点
・sizeは、positionの直後に『/』を付けて記載する。
・『border-box』などの値が1つある場合、『origin』と『clip』両方に指定され、
値が2つある場合は、1つ目の値が『origin』2つ目の値が『clip』として指定されます
それでは、以下のデモをご覧ください。
See the Pen xxOZKNm by ryu (@ryu-no-sss) on CodePen.
このように、『background』を使えば一括で指定することができます。
まとめ
・『background: attachment image position/size repeat origin clip;』
・『background』を使って一括で指定する時は、注意点に気をつけて使用しましょう！
それでは、最後まで読んでいただきありがとうございました。
