web制作のしおり

日々の学習をアウトプットします。

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プロパティについて整理してきました。

調べてみると知らないことが沢山ですね。

 

では、また。