ジャンクワードの森

[CSS]backgroundプロパティを使って背景画像を複数設置する方法と注意点など

当サイトではアフィリエイト広告を利用しています。

CSSのbackgroundプロパティでは背景画像を複数設置することが可能になっています。これを使うとHTMLをゴチャゴチャやらなくても四隅に別々の画像を配置するなど簡単にできるようになります(古いブラウザでは対応していないものがあるので注意は必要です)。
20140108
CSSが得意な人にとっては基本中の基本かもしれませんが、自分の周り(主に仕事関係)の中でも知らない人も多くいましたし何よりも自分で作る度に迷ってしまうので、やり方と注意点をまとめておきたいと思います。


このエントリーをはてなブックマークに追加

backgroundプロパティの記述方法

まずは基本となるbackgroundプロパティの記述方法からですが、これは比較的簡単でこんな感じでOKです。

[php].sample{
background: url(./images/no1.png),url(./images/no2.png),url(./images/no3.png),url(./images/no4.png);
}[/php]

要はurlを「,」で区切って並べる、ただそれだけです。

ただこれだけだと位置が確定しないので、四隅に配置するとしたらこんな感じになります。

[php].sample{
background: url(./images/no1.png) left top no-repeat,url(./images/no2.png) right top no-repeat,url(./images/no3.png) right bottom no-repeat,url(./images/no4.png) left bottom no-repeat;
}[/php]

画像が重なれなければ順番はどうでもいいのですが、CSSの値の指定で省略した場合の順番が[上][右][下][左]になっているので、それに合わせて記述するようにしています(画像を重ねる場合はこの後で説明します)。

<サンプル>
上記の記述で書くとこんな感じになります(画像のパス、ボックスのサイズ指定などの関係で若干違いはあります)

backgroundプロパティテスト

<補足>
画像は「background-imageプロパティ」でも設定できますが「背景画像の位置」も決める関係もあって、包括的に使える「backgroundプロパティ」を使っています。

背景画像を重ねるときのルールと注意点

四隅に配置する方法を先に説明しましたが、デザイン的な関係で背景画像を重ねることもあると思います(ベースにテクスチャを敷いた上にアイコンを載せるようなやり方)。

この時に重要になってくるのが「画像の重なりの順番(=ルール)」だと思いますが、そのルールがこちら
左に書いたものが上になる
たったこれだけです(そんなに複雑なコントロールができるとも思えませんけど^^)。

したがって、テクスチャをベースに敷き、その上にアイコンを載せるような場合は「アイコン」「テクスチャ」の順に書く必要があります。

透過した画像を使って微妙な風合いを出す場合は技と上下を逆にするなどのテクニックも使えますけど、これはかなりの高等テクニックになるので、あまりオススメはしません(やり方次第で色々と考えられますけどね)。

をしっかりと理解していないと思った通りの配置になってくれません。

ということでこちらもサンプルを用意してみました。
使うのはこの2つの画像(上下がわかりやすくするため、テクスチャを半透明にしてあります)
back yajirushi

記述方法1(背景用画像を先に)

CSSソース
[php].sample{
background: url(./images/back.png) left top ,url(./images/yajirushi.gif) left top no-repeat;
}[/php]

記述方法2(背景用画像を後に)

CSSソース
[php].sample{
background: url(./images/yajirushi.gif) left top no-repeat,url(./images/back.png) left top ;
}[/php]

背景用画像を後にしたほうが矢印の画像が鮮明になっているのがわかると思います。
ちなみに、これは画像の数が3つ、4つになっても条件はおなじになります。

応用編としては、こういった感じでテクスチャの上に紙をめくったようなものを追加することもできます。

背景画像サンプル

<注意点>
前にも書いていますが、今回紹介した方法ブラウザのバージョンによっては対応していません。具体的には以下のバージョンはNGなので、対象としている場合は背景の色を指定するなど対策が必要になります。

・非対応ブラウザ
 Firefox 1~Firefox 3.5 ⋮
 Internet Explorer 6~Internet Explorer 8
 Opera 8~Opera 10
 Safari 1 and Safari 1.2

背景画像を上手く使うことでサイトデザインの幅も広がってくると思うので、今まで画像で苦労していた人は是非試してみてはいかがでしょうか。

Sponsored Links

同じカテゴリの最新記事

運営者情報など

運営サポート

35-45 WOMAN

35-45WOMAN(サンゴーヨンゴーウーマン)は、「カッコいいけど身近」な女性向けWEBマガジン。

デザインとかコーディングとか、WordPressの構築とか裏側の部分を一通りやらせていただいています。

ブログ更新のアイテムとかスキルとか