CSSで左右に別々の背景を設定する方法

こんな感じでウインドウに合わせて幅100%の見出しのデザインとかってよくありますよね。

different-bg-right-left

で、このようなデザインで画像にしておきたいのは真ん中だけ、ということが多々あります。

different-bg-right-left02

なんでかって言うと画像をそのまま幅100%表示させてしまうと、画像幅以上にウインドウが広がったときにせっかく作成した画像がボヤけてしまったりするからです。

なので上のイメージのように真ん中部分だけ切り取って、margin: 0px auto; などで常にメインイメージは中央に表示される、というようなレイアウトを作るのがよくあるやり方です。

different-bg-right-left03

そうすると問題になるのがエリア全体の背景です。この例の場合、中央でグラデーションしているので左側と右側の背景色が別々になってしまっているんですね。

このケースだと中央に透過画像を設置して、背景となる要素はCSSでグラデーションをかけるといったやり方もありそうですが、今回は左右を別々の背景にする方法を紹介します。

HTMLは次のようになります。

全体を囲うdivがあって、そのなかに中央配置するためのdivがある。シンプルなHTMLですね。

次はCSSです。

.wrapでは全体での背景を設定して、その後 .wrap:beforeで擬似要素を作って右側の背景を設定しています。

.imageはこのままだと絶対配置された .wrap:beforeに隠れてしまうので、同じように絶対配置で中央に画像をレイアウトしています。

different-bg-right-left

するとこのような画像中央配置、ウインドウサイズを広げても画像は拡大することなく左右別々の背景が横に伸びる、という表示を作ることができます。

地味なテクニックですが、ウインドウ幅100%のダイナミックなWebデザインは増えているのでどこかで使う機会があるかもしれません。

アイドットデザインのブログはWeb業界の話題に限らず幅広いビジネストピックについて書いています。
よろしければFacebookページのフォローをどうぞ!ビジネスに役立つ情報をお届けします!

福岡のホームページ制作・SEO対策はアイドットデザインまでご相談ください!
インターネット集客やWebマーケティングのご相談も承ります。

follow us in feedly

Facebookページに「いいね!」して更新情報をチェック!

« »