CSSでよく使われる「background」プロパティ。背景色を決めたり、背景に画像を敷くときに使います。
それぞれのプロパティの役割をまとめました。
コピペで使えますのでぜひお気軽にお使いください。
目次
backgroundのそれぞれのプロパティ
ついでにbackgroundのそれぞれのプロパティについてざっくり紹介しておきますね。
紹介するソースは一例ですが、ショートハンドを使わずに書く方法ですので、こちらをコピペして使うこともできますよ。
background-color
背景色を指定します。こちらはシンプルで背景に色を付けるだけのプロパティです。
CSS
body {
background-color: #ff9900;
}
background-image
背景に画像を設定します。背景画像の大きさや位置などはこれから紹介するプロパティとセットで使うことで表現できます。
CSS
body {
background-image: url("bg.png");
}
background-attachment
ここから紹介するものはbackground-imageに関連するプロパティなのでbackground-imageの記述も一応添えておきますね。
背景画像を固定させるかスクロールさせるかを指定します。
CSS
body {
background-image: url("bg.png");
background-attachment: fixed; /* 背景画像を固定する場合 */
background-attachment: scroll; /* 背景画像をスクロールさせる場合 */
}
background-position
背景画像の配置位置を設定します。縦方向と横方向の2つの設定が必要で、縦方向は「top, center, bottom」、横方向は「left, center, right」のいずれかで指定します。
CSS
body {
background-image: url("bg.png");
background-position: center center;
}
background-repeat
背景画像を繰り返して表示させるかどうかを制御します。
写真を表示するような場合はno-repeat、テクスチャの一部を繰り返して表示させる場合はrepeatを指定します。
CSS
body {
background-image: url("bg.png");
background-repeat: no-repeat; /* 背景画像を繰り返さない */
background-repeat: repeat; /* 背景画像を縦と横方向に繰り返す */
background-repeat: x-repeat; /* 背景画像を横方向に繰り返す */
background-repeat: y-repeat; /* 背景画像を縦方向に繰り返す */
}
background-size
文字通り背景画像の大きさを指定します。ピクセル指定してきっちりサイズ指定することもできますし、背景の大きさいっぱいに表示させたい場合はcoverを指定します。
CSS
body {
background-image: url("bg.png");
background-size: 640px 360px; /* サイズ指定するとき */
background-size: cover; /* 画面いっぱいにするとき */
}
最後に
最近はショートハンドで書いてしまうことも多いですけども、それぞれのプロパティの理解をしておくことは大切ですね。
なにか間違いがあれば教えてください。すぐ修正します。