CSSで背景画像を重ね合せ

【STEP7】CSSでブラウザのホームページ外領域を満たす背景を実現する

ページを一番下まで閲覧した時に背景画像にもメニューがあると何かと操作性に優れます。ページトップへの戻りと併用するならば、さりげなく広告テキストも良いでしょう。

Copyright ©は、ページの一番下まで閲覧してくれた訪問者(=濃いというか、かなりページに興味を持った方の場合が多いと思います)にホームページを再アピールする部分ですがら、少しだけデザインの工夫が欲しくなります。

まず、STEP7までの内容が全て織り込まれたファイルをダウンロードしてください。zip形式で圧縮されていますので、展開してご利用ください。

design7.zipをダウンロード

【STEP7】背景画像重ね合せイメージ

ホームページ作成無料講座(CSSで背景画像を重ね合せ)背景使用イメージ

背景画像にはサブ部が重なる部分にも着色されていることをご確認ください。その部分は重ねた状態でメニューの周囲を覆うような位置関係になっています。header部とfutter部は、CSSで白で着色しておりますので、サブ部だけにその着色が現れる訳です。

【STEP7】画像の作りかた

CSSにも関連しますが、次のような画像を準備します。

ホームページ作成無料講座(CSSで背景画像を重ね合せ)背景用の画像

上のような、パソコンの画面の横方向を十分に満たす幅の画像を用意します。センター振り分けで、ホームページの幅の部分(サブ部+αの部分の着色)を作り、両外にはホームページ外に配置したい模様を持ってきます。両外のエッジ部には、立体ボタンのエッジなどを使うとホームページとの間に立体感が出ます。CSSのところで、後述しますが、高さ方向の寸法は適当で結構です。

また、サブ部を左にしたい場合には、画像編集ソフトでこの画像を180度回転させておきます。

【STEP7】CSSファイル関連部分

body { margin:0; /*上下左右マージン0 */ padding:0; /*上下左右余白0*/ text-align:center; /*テキストアラインセンター*/ line-height:1.6; /*行間*/ letter-spacing:1px; /*改行ピッチ*/ background:#fff url("image/bg.gif") 50% 50% repeat-y fixed; /* 中心を一致させて縦方向に繰り返して表示してブラウザ上を満たす*/ border-top:10px solid #0080B0; }

背景画像を重ね合わせているのはの部分です。repeat-y fixedで、縦方向に繰り返し画像を表示してブラウザを満たしてくれますので、用意する画像の高さは適当で良い訳です。

50% 50%で、ホームページと画像の中心を合わせてくれるので、上の方法で作った画像ならば、必ず位置が合う訳です。ホームページの幅やサブ部の幅を変えたい場合には画像を作り直す必要があります。

CSSとXHTMLで背景画像部装飾後のプレビュー結果

【STEP7】プレビュー実行

XHTMLをCrescnt Eveでプレビューしてみます。(プレビュー方法を知りたい方→プレビュー方法

ホームページ作成無料講座(CSSで背景画像を重ね合せ)背景画像重ね合わせ結果

できましたね。外観上は完成しました。

今回は、CSSと画像編集の話でしたが、良く判りましたか?

「CSSで背景画像を重ね合せ」は以上です

次はウェブデザインの最終回になります。
CSSとXHTMLで便利機能を実現してみましょう。便利機能を作るにお進みください。

講座メニュー

テーマを決めよう

ツールを準備しよう

サーバーを準備しよう

ウェブデザイン

HP公開:
2011/07/23
最終更新:2014/07/16