多くの場合、この場合、ブラウザーウィンドウのサイズを変更するときに背景が歪まないようにします。
これは、測定値（幅または高さ）のいずれかが％で指定されているimgを使用して実行できる場合もあります（背景が背景であり、コンテンツを特別な手法なしで画像に配置できない場合のみ）。
要素の背景画像を設定するCSS background-imageプロパティを使用することが思い浮かびます。 ただし、追加タグがない場合、画像は左上隅に結び付けられ、要素が画像よりも小さい場合は切り取られ、要素が大きい場合は白い領域が右と下に表示されます。
次に頭に浮かぶのは、背景のカスタマイズに役立つ追加のCSSプロパティの検索です。 それらはbackground-repeat 、 background-positionおよびbackground-sizeです。
このプロパティはIE8およびquirksモードの IE9でもサポートされていないため、問題はより正確にbackground-sizeで始まります 。
この問題には2つの解決策があります。
- 正解（松葉杖を使用）。
- 速い（XPユーザーは、最後に利用できるIE8で、美しい背景なしで）。
適切なソリューションを選択した場合、インターネット上の情報は次のとおりです。
1. IE用のネイティブの松葉杖
ユーザーは違いに気付かないので、背景画像を引き伸ばしたり絞ったりすることが許容される場合があります（1ピクセルストリップのグラデーションはページの幅全体に広がり、見栄えがよくなります）
これを行うには、CSSプロパティとして次を追加します。
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/logo.gif', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/logo.gif', sizingMethod='scale')";
images / logo.gifは背景画像へのパスです。
これらのプロパティはIEのみが理解し、通常のブラウザに害を与えることはありません。
2. jquery.backgroundSize.js
このプラグインは作成者によって非推奨としてマークされていますが、機能します。
利点：
- IE6、IE7、IE8で動作します。
- ブラウザがbackground-sizeプロパティをサポートしている場合は無効です。
短所：
- すべてのブラウザーの背景を置き換えます（ background-sizeをサポートしている場合でも）、またはquirksモードの IE9では動作しません（また、 background-sizeをサポートしません）。 条件付きコメントを介して接続メソッドと接続されます。
- 要素のサイズを変更するとき（ウィンドウのサイズを変更せずに）、画像の更新をサポートしません。
- カバーと包含プロパティのみをサポートします。
- jQueryを使用してbackground-sizeプロパティを設定する必要があります。
- 動作するにはjQueryが必要です。
このソリューションを使用するには、次のようにページに接続する必要があります。
<!-- The flag should be inserted before loading the script --> <script>$.debugBGS = true;</script> <!--[if lt IE 9]> <script src="/path/to/jquery.backgroundSize.min.js"></script> <![endif]-->
そして、次のような要素のbackground-sizeプロパティを設定します 。
$(elem).css( "background-size", "cover" );
3. background-size-polyfill
ソリューションNo. 2の開発です。
利点：
- 作業には、外部ライブラリは必要ありません。
- background-sizeプロパティの設定はほぼ通常の方法です（ -ms-behavior：url（/backgroundsize.min.htc）;を追加する必要があります ）。
- coverおよびcontains以外の背景サイズの値をサポートします 。
短所：
- IE8のソリューションとして位置付けていますが、IE7では機能し、IE6では機能しません。
- IE8のquirksモードでは機能しません。
- 要素のサイズを変更するとき（ウィンドウのサイズを変更せずに）、画像の更新をサポートしません。
- ブラウザのバージョンのチェックはありません。したがって、ブラウザがこのプロパティをサポートしていても、 background-sizeと-ms-behaviorを持つすべての要素にimgを持つdivを挿入します。
このソリューションを使用するには、このソリューションのサイトから取得した.htaccessファイルを、サイトのルート、およびbackgroundsize.min.htcが必要な場所に配置する必要があります 。
要素のCSSプロパティをbackground-sizeとともに設定する場合、 -ms-behaviorプロパティを設定する必要があります。url（path_to_your_where_will_cause / backgroundsize.min.htc）;
4. background-size-emu
ソリューションは、ソリューションNo. 3のアイデアに基づいています。
利点：
- 作業には、外部ライブラリは必要ありません。
- background-sizeプロパティの設定は通常の方法です（他に何かを追加する必要はありません）。
- coverおよびcontains以外の背景サイズの値をサポートします 。
- 互換モードの IE6、IE7、IE8、IE9で動作します 。
- ブラウザがbackground-sizeプロパティをサポートしている場合は無効です。
- ブラウザーウィンドウのサイズを変更せずに、要素のサイズを変更するときに、画像の更新をサポートします。
短所：
- サイズ変更時に、ページに動的に追加された瞬間に、イメージを0.5秒の遅延で更新します。
- 500ミリ秒に1回、ページ上のすべてのDOM要素をスキャンし、更新が必要なものとそうでないものを判別するため、少し古いIEをロードします。
- TR要素の背景を交換できません。
このソリューションを使用するには、スクリプトをページに接続するだけです。
一般的な問題
決定No. 2、No。3、およびNo. 4はbackground-sizeが設定されている要素に挿入されます。内部にimgを持つ絶対位置のdivで、要素のサイズに応じて画像のサイズを変更します。
これはまだ松葉杖であるため、すべてのソリューションでサポートされているわけではありません。
- いくつかの背景画像。
- background-positionの 4桁の構文。
- バックグラウンドリピート （繰り返しなし）。
- 背景の非標準値- [クリップ/原点/添付ファイル/スクロール] （値を変更しても、これは何にも影響しません）。
- ネストされた要素が存在できない要素のバックグラウンド置換。
最後に
上記のライブラリはすべてGitHubで入手できます。