47.実は色々出来る。backgroundプロパティ ~多様な背景指定でデザインの幅を広げる~
何気なく使っているbackgroundプロパティ。
実は一括指定のプロパティで、私は普段
background-colorやbackground-imageぐらいしか使用していませんでした。
今回はその他にどのようなプロパティがあるのかや、新しく得た知識などをアウトプットしていきます。
では、早速やっていきましょう。
backgroundは一括指定って言うけれど・・・?
一体どれだけのプロパティを一括指定出来るのかと言えば、
- background-attachment
- background-clip
- background-color
- background-image
- background-origin
- background-position
- background-repeat
- background-size
漏れが無ければ、これだけあるようです。
想像以上にヘビー。
いつものように1つずつ見ていきましょう。
各プロパティについて確認する
まずはおなじみのプロパティから
background-color
言わずとしれた背景色指定のプロパティ。
#ffffffのように16進数で単純な色指定をしたり、
rgba(255,255,255,0.5)で表記して、色指定に加えて不透明度指定をしたりできます。
基本的にはbackground-imageの後ろに描画されるようです。
因みに、デフォルト値は transparent。
背景色 : 「透明」が常に指定されていたとは…。
background-image
こちらもおなじみ、背景画像指定のプロパティ。
私は知らなかったのですが、複数の背景画像が指定できるのです。
下記のようにカンマで区切って併記できます。
background-image: url("test1.png"),url("test2.png");
そして、この重なり方ですが、先に書いた画像ほど上に来るように配置されます。
background-origin
ここからはあまり普段目にしないプロパティだと思います。
このoriginは、背景を配置する基準位置を指定するプロパティ。
値こそ数値で指定できないものの、動きはpositionプロパティに似ています。
デフォルト値は background-origin : padding-box;
要素のボーダーより内側を基準として背景を配置します。
その他には、
background-origin: border-box;
background-origin: content-box;
があり、
border-boxはボーダーを含めた要素の端を基準に背景が配置されます。
content-boxは要素の内容部分※を基準に背景が配置されます。
※インライン要素に背景色指定した時と同じ位置に配置されるイメージかと。
background-position
positionプロパティに似ているなんて話をしていたら、ありましたね。
これは先程のbackground-originと組み合わせて使うプロパティです。
まさに
position : relative;
top : 50%:
left : 50%;
のように、
background-originで指定した基準位置から、どれだけ移動させるかを指定します。
例えば、
background-position: bottom 10px right 20px;
のように指定します。
因みに、パーセントでも指定できます。
デフォルト値は background-position: top 0% left 0%;です
一先ず、今日はここまでにします。
今日のまとめ
- backgroundプロパティには指定出来るものがたくさんある。
- background-imageは複数指定可能
- background-originとbackground-positionを使うことで背景の配置の位置をpositionプロパティのように設定できる
本日はbackgroundプロパティについて整理してきました。
調べてみると知らないことが沢山ですね。
では、また。