background-*プロパティ

いつもbackgroundにショートハンドで書いていたのでフルのプロパティ名なんぞ知らん！というわけで頭の中でふわふわしているbackground-*プロパティを復習してみようと思います。

• background-colorプロパティ
• background-imageプロパティ
• background-repeatプロパティ
• background-positionプロパティ
• background-originプロパティ
• background-sizeプロパティ
• background-attachmentプロパティ
• background-clipプロパティ

background-position

背景画像の位置を指定するプロパティです。px,%,キーワード(left top center bottom)で指定できます。

左上基準でx yの順で位置を指定します。

background-position: 10px 5px;

background-position: center;
background-position: 50%;

background-position: left top;
background-position: 0 0;

CSS3では○から○pxという指定も可能です。下記は右から10px 下から20pxという指定になります。

background-position: right: 10px bottom 20px

background-origin

border,padding領域に対する扱いを指定するプロパティです。

• border-box 背景はボーダー領域に表示される
• padding-box 背景はボーダー領域の内側から表示される
• content-box 背景はpaddingの内側に表示される

background-size

背景画像の大きさを指定するオプションです。

• 横縦の数値px
• cover アス比を保ったまま長い辺に合わせて拡大縮小される
• contain アス比を保ったまま短い辺に合わせて拡大縮小される。

複数の背景画像の指定

CSS3ではカンマ区切りで複数の背景画像を同時に指定できるようになりました。わざわざdiv入れこまなくても済むのでかなり楽です。

background: url(bg-1.png) center 0 no-repeat, url(bg-2.png) 0 0 repeat-x, url(bg-3.png) bottom center no-repeat;

background-*のロングハンド

div {
  background-image: url(bg-1.png), url(bg-2), url(bg-3);
  background-repeat: no-repeat, repeat-x, no-repeat;
  background-position: center top, left top, center bottom;
  background-origin: padding-box;
  background-size: auto;
  background-color: #fff;
}