CSSで左右で違う背景画像を表示したい！
最近、ランディングページを制作していて「ブロック毎の背景画像に左右で違うものを表示したいなぁ」て思って、とうとつに調べたので備忘録で掲載しときます。
簡単じゃん！
左右で違う背景画像を表示したい場合、以前やていたのはブロックを３分割し、左右のブロックの背景画像として設定し表示してました。（←ほんとにやってた）
今回もこの方法で再現しようかと思いましたが、念のためネットで調べてみると別のCSS設置方法があることがわかりました。
その方法とは、CSSのbackgroundで背景画像を３つ設定できるとの事！
早速、CSSで設定してみたら簡単に表示することができました。
backgroundプロパティ
設定の方法は、簡単！
- 左右の画像、全体の背景画像の3枚の背景画像を用意する。
- 次に表示したいブロックのbackgroundに3つの背景画像を指定する。
指定方法は、下記の要領で！
background: url(images/image-l.png) no-repeat top left, url(images/image-r.png) no-repeat top right, url(images/image-bg.png) repeat-x;
backgroundに、「左に表示する画像」「右に表示する画像」「全体に表示する画像」の順に指定するだけでした。
今まで知らなかった自分が、悔しい！
HTMLも汚すことなく、見通しが良いので、非常にいい感じです。
