CSS3を使用して背景画像を伸ばしてWebページに合わせる

画像は魅力的なウェブサイトデザインの重要な部分です。これには、背景画像の使用も含まれます。これらは使用される画像とグラフィックです 後ろに コンテンツページの一部として提示される画像とは対照的に、ページの領域。これらの背景イメージは、ページに視覚的な関心を与え、ページ上で探しているビジュアルデザインを実現するのに役立ちます。

背景画像を使用して作業を開始する場合は、間違いなく、画像をページに合わせて伸ばしたいシナリオにぶつかるでしょう。これは、幅広いデバイスや画面サイズに配信されているレスポンシブウェブサイトの場合に特に当てはまります。

背景画像を引き伸ばすこの願望は、すべての画像がウェブサイトの空間に収まるわけではないので、ウェブデザイナーにとって非常に一般的な要望である。固定サイズを設定する代わりに、イメージを引き伸ばすことで、ブラウザウィンドウの幅や幅にかかわらず、ページに収まるようにフレックスさせることができます。

ページの背景に合わせて画像を伸ばす最善の方法は、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" />

1. まず、すべてのブラウザの高さが100％、マージンが0、パディングが0であることを確認しますHTML 体 要素。 HTML文書の先頭に次のコードを挿入します。
2. バックグラウンドにしたい画像をWebページの最初の要素として追加し、それに id "bg"の：
3. 背景画像を上下左右に固定し、幅100％、高さ100％になるように配置します。これをあなたのスタイルシートに追加してください：
   1. img＃bg {
   3. 位置：固定;
   5. トップ：0;
   7. 左：0;
   9. 幅：100％;
   11. 高さ：100％;
   13. }
4. すべてのコンテンツをページ内に追加する DIV 要素と id 「コンテンツ」の追加する DIV 画像の下に：ヘッダー、段落などのすべてのコンテンツ
   1. 注：今あなたのページを見て興味深いです。画像が伸ばして表示されるはずですが、コンテンツは完全に表示されません。どうして？背景画像は高さが100％であり、コンテンツの分割は 後 ドキュメントの流れの中のイメージ - ほとんどのブラウザはそれを表示しません。
5. コンテンツが相対的な位置に配置され、 Z-インデックス これにより、標準に準拠したブラウザの背景イメージの上に表示されます。これをあなたのスタイルシートに追加してください：
   1. #content {
   3. ポジション：相対;
   5. z-インデックス：1;
   7. }
6. しかし、あなたは終わっていない。 Internet Explorer 6は標準に準拠しておらず、まだいくつかの問題があります。 IE6以外のすべてのブラウザからCSSを非表示にする方法はたくさんありますが、最も簡単な方法は条件付きコメントを使用することです。あなたのスタイルシートの後ろを文書の先頭に置く：
7. 強調表示されたコメントの中に、いくつかのスタイルを持つ別のスタイルシートを追加して、IE 6がうまくいくようにします：
8. IE 7とIE 8でもテストしてください。コメントを調整する必要がある場合もあります。しかし、私はそれをテストしたときに機能しました。

これは間違いありません。非常に少数のサイトはIE 7または8をサポートする必要があります。このように、このアプローチは陳腐化しており、おそらくあなたには不要です。好奇心のモデルとして、私たちのブラウザがうまく一緒に遊ぶ前にはるかに難しいものがあったかどうかを、ここに残しておきます！

より小さなスペースで伸ばした背景画像を偽る

同じようなテクニックを使って、伸ばした背景画像を DIV またはあなたのウェブページ上の別の要素。絶対配置を使用するか、ページの他の部分に奇妙な間隔の問題があるため、これはやや難解です。

1. 背景として使用したいページに画像を置きます。
2. スタイルシートで、イメージの幅と高さを設定します。幅や高さのパーセンテージを使用できますが、高さの長さの値を調整する方が簡単です。
   1. img＃bg {
   3. 幅：20em;
   5. 高さ：30em;
   7. }
3. divでコンテンツを id 上記のように「コンテンツ」：あなたのすべてのコンテンツはここに
4. コンテンツdivのスタイルを、背景画像と同じ幅と高さに設定します。
   1. div＃content {
   3. 幅：20em;
   5. 高さ：30em;
   7. }
5. 次に、画像と同じ高さにコンテンツを配置します。だからあなたのイメージが30emなら、あなたはトップのスタイルを持つでしょう：-30em;コンテンツにZ-インデックス1を付けることを忘れないでください。
   1. #content {
   3. ポジション：相対;
   5. top：-30em;
   7. z-インデックス：1;
   9. 幅：20em;
   11. 高さ：30em;
   13. }
6. 上記のように、IE 6ユーザーにz-index -1を追加します。

繰り返しますが、バックグラウンド・サイズで広範なブラウザー・サポートを楽しんでいる場合、このアプローチも不要であり、過去の時代の製品として提示される可能性が非常に高いです。このアプローチを使用したい場合は、可能な限り多くのブラウザでこれをテストしてください。コンテンツのサイズが変更された場合は、コンテナと背景イメージのサイズを変更する必要があります。そうしないと、奇妙な結果に終わります。