#ffffff #bc7c43 #beb53f #85a248 #2f6850 #4f8ea4 #89bcc5 #565669 #000000 #b22222 #daa09a

web material *Essence

  1. Home
  2. DesignTips
  3. background

background

背景画像の複数指定

CSS3より、一つの要素に複数の背景を適用できるようになりました。
以前のような複数のレイヤー(div等)を重ねて表示する方法より、簡素化されて分かりやすいソースで複雑なデザインも手軽に表現できるようになりました。(IE9から対応)

body{
 background:
  url(上に表示される画像ファイル名) center top repeat-y fixed,  /* 白いレースボーダー画像 */
  url(下に表示される画像ファイル名) repeat;  /* ピンクの花柄画像 */
}

背景を複数指定する場合カンマで区切って指定し、重なる順番は上に記述した方が上位になります。
上記のショートハンドプロパティ background: の他、
background-color: 以外の個別プロパティ(background-colorは最後のひとつ(一番背面)に対してしか指定できないため)
background-attachment, background-clip, background-image, background-origin, background-position, background-repeat, background-size でも利用可能です。
また、スマートフォン等では複数指定するショートハンドでは上手く表示されない場合があるので、個別プロパティで記述した方が安心です。

例1:個別プロパティの場合

body{
 background-image:
  url(上に表示される画像ファイル名),
  url(下に表示される画像ファイル名);
 background-position:
  center top;
  center top;
 background-repeat:
  repeat-y,
  repeat;
}
例1:を別窓で表示