makurazaki.org
[CSS3]CSS3で背景画像を複数指定する!IE9以上 | Maku_zin Ver2.1.1
3歩進んで2歩下がる生活スタイルがすっかり定着の下山です。 マウスをカチカチやってるよりキーボードをパチパチやってるほうが好きです。(前フリ) という訳で背景画像を3つの素材からCSSで作ってしまおうと・・・photoshopとか画像処理なんてしませんよ! ご存知の通り、CSS3から1要素に複数の背景画像をしていできるようになりました。 例によってIE9以上です・・・(※確かCSS3をいくつかIE6~8でも有効にするCSS PIEてのがあります。) demo html CSS こんな感じで背景画像を複数指定できます。 backgroundプロパティに重ね順の上から指定していけばOKです。 今回はショートハンドプロパティで指定しましたけど、関連プロパティ個別指定ももちろんOKです。 こんな感じで。 これを使うと、例えばヘッダー背景がページの端から端まであってヘッダーより下の背景でパターンなんか指定する場合、普通にhtmlとCSS書けば問題ないんですが、CSSフレームワークとか使ってるとなかなか面倒なんですよね。(↓こんな感じのデザイン) ヘッダー部分の背景とボディ部分の背景をまとめてbodyに指定しちゃえば早いじゃない? なので次回はCSS PIEのことでも書きます。