CSSで左右に違う背景画像を表示 | Webクリエイターな備忘録

このサイトはフリーランスでWeb制作をするクリエイターの備忘録なメモサイトです。 Webサイトを作る際に気になった事やjavaScriptなどのライブラリの事などWebサイト制作に関する事、また気になるでき事、日常の事などを気ままに勝手に書き綴っています。

CSSで左右に違う背景画像を表示

CSSで左右に違う背景画像を表示

最近、ランディングページを制作していて、「ブロック毎の左右背景画像を違うものを表示したいなぁ」て思い、少し調べたので自分の備忘録で掲載しときます。

簡単じゃん!

左右に違う背景画像を表示したい場合、自分が以前やていたのはブロックを3分割し、左右のブロックの背景として表示してました。(←ほんとにやってた)
今回もこの方法で再現しようかと思いましたが、念のためネットで調べてみると、以前からあるのか、追加されたのか、CSSのbackgroundで背景画像を3つ設定できるとの事!
早速、やってみたら、あっさり簡単に表示できました。

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も汚すことなく、見通しが良いので、非常にいい感じです。

コメントは受け付けていません。