css,javascript,actionscriptを中心に勉強したことをまとめるブログ

CSS3では一つのボックス要素に対して最大4つの背景画像を指定することができます。

記述方法

記述方法は、通常の背景の指定と変わりません。
ちがうのは、カンマ区切りで最高4つまで背景をしてできるというところ。

background:
    url(path.hoge.gif) transparent no-repeat 0 0,
    url(path.hoge.jpg) transparent no-repeat left bottom;

先に指定した背景の方が上にきます。
また、背景のグラデーションと一緒に指定することもできました。
背景のグラデーション指定方法は先日の記事をどうぞ。

background-image:
    url(path.hoge.gif),
    -webkit-gradient(linear, left top, left bottom, from(#000000), to(#ffffff));
background-image:
    url(path.hoge.gif),
    -moz-linear-gradient(top, #000000, #ffffff);

グラデーションと一緒に指定するときは、background-imageで指定したほうがよさそうです。
グラデーションと背景画像、あとは角丸をつかえば色々なものがCSSだけで作れそうですね。

あ、それから背景の複数指定は

[Multiple background image]

というんだそうです。
これでググるとたくさんでてきますので、詳しくはそちらをどうぞ。

主な対応ブラウザ

• Google Chrome
• Fire Fox 3.6～
• Opera 10.5～

サンプルコード

CSS3 / background:複数

サンプルコードでは、3つの背景画像の上に、
網目の画像をリピートさせています。

参考サイト

SafariのCSS 3対応–1つの要素に複数の背景画像を表示する - builder
日食 と uuAltCSS.js と CSS3 multiple background image - latest log