あなたのウェブサイトに背景グラフィックを視覚的に与える
画像は魅力的なウェブサイトデザインの重要な部分です。 これには、背景画像の使用も含まれます。 これらは、コンテンツページの一部として提示される画像とは対照的に、ページの領域の後ろに使用される画像およびグラフィックスである。 これらの背景イメージは、ページに視覚的な関心を与え、ページ上で探しているビジュアルデザインを実現するのに役立ちます。
背景画像を使用して作業を開始する場合は、間違いなく、画像をページに合わせて伸ばしたいシナリオにぶつかるでしょう。
これは、幅広いデバイスや画面サイズに配信されているレスポンシブウェブサイトの場合に特に当てはまります 。
背景画像を引き伸ばすこの願望は、すべての画像がウェブサイトの空間に収まるわけではないので、ウェブデザイナーにとって非常に一般的な要望である。 固定サイズを設定する代わりに、イメージを引き伸ばすことで、ブラウザウィンドウの幅や幅にかかわらず、ページに収まるようにフレックスさせることができます 。
ページの背景に合わせて画像を伸ばす最善の方法は、background-sizeのCSS3プロパティを使用することです。 ここでは、ページの本体に背景画像を使用し、スクリーンに合わせて常に伸びるようにサイズを100％に設定する例を示します。
体 {
背景：url（bgimage.jpg）no-repeat;
背景サイズ：100％;
}
caniuse.comによると、このプロパティはIE 9+、Firefox 4+、Opera 10.5+、Safari 5+、Chrome 10.5以降、およびすべての主要なモバイルブラウザで動作します。 これは、今日利用可能なすべての最新のブラウザを対象としています。つまり、誰かの画面では動作しないという恐れなしにこのプロパティを使用する必要があります。
古いブラウザでの伸ばした背景の偽造
IE9より古いブラウザをサポートする必要はほとんどありませんが、IE8がこのプロパティをサポートしていないと懸念しているとします。 その場合、伸ばした背景を偽装することができます。 また、Firefox 3.6（-moz-background-size）とOpera 10.0（-o-background-size）のブラウザプレフィックスを使用することもできます。
伸ばした背景画像を偽る最も簡単な方法は、ページ全体に伸ばすことです。 それであなたは余分なスペースで終わらないし、テキストが伸びた領域に収まることを心配する必要があります。 それを行う方法は次のとおりです：
id = "bg" />
- まず、HTML BODY要素にすべてのブラウザの高さが100％、余白が0、埋め込みが0であることを確認します。 HTML文書の先頭に次のコードを挿入します。
- 背景となるイメージをWebページの最初の要素として追加し、 idに "bg"を付けます：
- 背景画像を上下左右に固定し、幅100％、高さ100％になるように配置します。 これをあなたのスタイルシートに追加してください：
img＃bg {
位置：固定;
トップ：0;
左：0;
幅：100％;
高さ：100％;
} - idが "content"のDIV要素内のページにすべてのコンテンツを追加します。 画像の下にDIVを追加します：
注：今あなたのページを見て興味深いです。 画像が伸ばして表示されるはずですが、コンテンツは完全に表示されません。 どうして？ 背景画像は高さが100％で、コンテンツの分割はドキュメントフローのイメージの後ろにあるため、ほとんどのブラウザでは表示されません。ヘッダー、段落などのすべてのコンテンツ
- 相対的で、 Z-インデックスが1になるようにコンテンツを配置します。これにより、標準準拠のブラウザの背景画像の上に表示されます。 これをあなたのスタイルシートに追加してください：
#content {
ポジション：相対;
z-インデックス：1;
}
- しかし、あなたは終わっていない。 Internet Explorer 6は標準に準拠しておらず、まだいくつかの問題があります。 IE6以外のすべてのブラウザからCSSを非表示にする方法はたくさんありますが、最も簡単な方法は条件付きコメントを使用することです。 あなたのスタイルシートの後ろを文書の先頭に置く：
- 強調表示されたコメントの中に、いくつかのスタイルを持つ別のスタイルシートを追加して、IE 6がうまくいくようにします：
- IE 7とIE 8でもテストしてください。 コメントを調整する必要がある場合もあります。 しかし、私はそれをテストしたときに機能しました。
これは間違いありません。 非常に少数のサイトはIE 7または8をサポートする必要があります。
このように、このアプローチは陳腐化しており、おそらくあなたには不要です。 好奇心のモデルとして、私たちのブラウザがうまく一緒に遊ぶ前にはるかに難しいものがあったかどうかを、ここに残しておきます！
より小さなスペースで伸ばした背景画像を偽る
同様の手法を使用して、Webページ上のDIVや他の要素を横切って伸びた背景画像を偽造することができます。 絶対配置を使用するか、ページの他の部分に奇妙な間隔の問題があるため、これはやや難解です。
- 背景として使用したいページに画像を置きます。
- スタイルシートで、イメージの幅と高さを設定します。 幅や高さのパーセンテージを使用できますが、高さの長さの値を調整する方が簡単です。
img＃bg {
幅：20em;
高さ：30em;
} - 上記のように、コンテンツをID「コンテンツ」のdivに配置します。
あなたのすべてのコンテンツはここに
- コンテンツdivのスタイルを、背景画像と同じ幅と高さに設定します。
div＃content {
幅：20em;
高さ：30em;
} - 次に、画像と同じ高さにコンテンツを配置します。 だからあなたのイメージが30emなら、あなたはトップのスタイルを持つでしょう：-30em; コンテンツにZ-インデックス1を付けることを忘れないでください。
#content {
ポジション：相対;
top：-30em;
z-インデックス：1;
幅：20em;
高さ：30em;
} - 上記のように、IE 6ユーザーにz-index -1を追加します。
繰り返しますが、バックグラウンド・サイズで広範なブラウザー・サポートを楽しんでいる場合、このアプローチも不要であり、過去の時代の製品として提示される可能性が非常に高いです。 このアプローチを使用したい場合は、可能な限り多くのブラウザでこれをテストしてください。
コンテンツのサイズが変更された場合は、コンテナと背景イメージのサイズを変更する必要があります。そうしないと、奇妙な結果に終わります。