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

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

CSSで左右で違う背景画像を表示したい!

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

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

簡単じゃん!

左右で違う背景画像を表示したい場合、以前やていたのはブロックを3分割し、左右のブロックの背景画像として設定し表示してました。(←ほんとにやってた)

今回もこの方法で再現しようかと思いましたが、念のためネットで調べてみると別のCSS設置方法があることがわかりました。

その方法とは、CSSのbackgroundで背景画像を3つ設定できるとの事!

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

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