MW211 EXIT

devlog
CSS/複数背景画像(2)CSS3
2014年03月22日
CSS3では、カンマ区切りで指定すれば、
二つ以上の画像を背景画像として配置することができるようになった。
┌──────────────────────────────────────┐
│body {                                                                      │
│    background          :url("左画像.png") no-repeat  5% center,            │
│                         url("右画像.png") no-repeat 95% center;            │
│}                                                                           │
└──────────────────────────────────────┘
上記は画面中央の左端と右端に画像を配置した例。

ちなみに「background」プロパティは、「background-image」プロパティなど
いくつかの「background」系プロパティをまとめたものだが、
プロパティごとに指定する場合には、それぞれの順番を合わせればよい。
┌──────────────────────────────────────┐
│body {                                                                      │
│    background-image    :url("左画像.png"),                                 │
│                         url("右画像.png");                                 │
│    background-repeat   :no-repeat,                                         │
│                         no-repeat;                                         │
│    background-position : 5% center,                                        │
│                         95% center;                                        │
│}                                                                           │
└──────────────────────────────────────┘
分類:CSS