CSSの背景を伸縮する

CSSの背景をコンテナに合わせて拡大または縮小する方法はありますか？

最新のブラウザの場合、これを使用してこれを実現できますbackground-size。

body {
    background-image: url(bg.jpg);
    background-size: cover;
}

cover 画像を垂直方向または水平方向に引き伸ばして、タイル状になったり繰り返したりしないようにすることを意味します。

これは、Safari 3以降、Chrome、Opera 10以降、Firefox 3.6以降、Internet Explorer 9以降で機能します。

Internet Explorerの下位バージョンで動作するようにするには、次のCSSを試してください。

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

CSS 3プロパティを使用しますbackground-size。

#my_container {
    background-size: 100% auto; /* width and height, can be %, px or whatever. */
}

これは、2012年以降、最新のブラウザーで使用できます。

CSSを使用して画像をスケーリングすることは不可能ですが、次の方法でも同様の効果を得ることができます。

このマークアップを使用します。

<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</div>

次のCSSで：

#background {
    width: 100%; 
    height: 100%; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: 0;
}

.stretch {
    width:100%;
    height:100%;
}

そしてあなたはやるべきです！

画像を「フルブリード」に拡大縮小してアスペクト比を維持するには、代わりに次のようにします。

.stretch { min-width:100%; min-height:100%; width:auto; height:auto; }

それはかなりうまくいきます！ただし、1つの寸法が切り取られる場合は、両側で均等に切り取られる（中央揃えされる）のではなく、画像の片側でのみ切り取られます。Firefox、Webkit、およびInternet Explorer 8でテストしました。

使用する背景-size属性を CSS3で：

.class {
     background-image: url(bg.gif);
     background-size: 100%;
}

編集： Modernizrは、背景サイズのサポートの検出をサポートしています。動作するように記述されたJavaScriptの回避策を使用できますが、必要な場合はサポートがなく動的にロードします。これにより、特定のブラウザでの煩わしいCSSハッキングに頼ることなく、コードを保守しやすくなります。

個人的に私はjimgを使用してスクリプトを処理します。これはimgsizerを応用したものです。ほとんどのデザインで、デバイス全体の流動的なレイアウトに幅％を使用しているので、ループの1つにわずかな調整があります（常に100％とは限らないサイズを考慮します）。

for (var i = 0; i < images.length; i++) {
    var image = images[i],
        width = String(image.currentStyle.width);

    if (width.indexOf('%') == -1) {
        continue;
    }

    image.origWidth = image.offsetWidth;
    image.origHeight = image.offsetHeight;

    imgCache.push(image);
    c.ieAlpha(image);
    image.style.width = width;
}

編集：jQuery CSS3 Finaliz [s] eに も興味があるかもしれません。

記事background-sizeを試してください。以下のすべてを使用すると、Internet Explorerを除くほとんどのブラウザーで機能します。

.foo {
    background-image: url(bg-image.png);
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    -webkit-background-size: 100% 100%; 
    background-size: 100% 100%;
} 

現在はありません。CSS 3で利用できるようになりますが、ほとんどのブラウザで実装されるまでにはしばらく時間がかかります。

.style1 {
        background: url(images/bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

で動作します：

• Safari 3以降
• Chrome Whatever +
• IE 9以降
• Opera 10+（Opera 9.5はbackground-sizeをサポートしていますが、キーワードはサポートしていません）
• Firefox 3.6+（Firefox 4はベンダー以外の接頭辞付きバージョンをサポートしています）

さらに、IEソリューションでこれを試すことができます

    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
    zoom:1;

Chris Coyierによるこの記事のクレジット http://css-tricks.com/perfect-full-page-background-image/

一言で言えば、いいえ。画像を引き伸ばす唯一の方法は<img>タグを使用することです。あなたは創造的である必要があります。

これは、答えが書かれた2008年には真実でした。今日のブラウザーは、background-sizeこの問題を解決するをサポートしています。IE8がサポートしていないことに注意してください。

「ストレッチとスケール」を定義します...

あなたがビットマップフォーマットを持っているなら、それを引き延ばして引っ張るのは一般に（グラフィックス的に言えば）素晴らしいことではありません。繰り返し可能なパターンを使用して、同じ効果のような錯覚を与えることができます。たとえば、ページの下部に向かって明るくなるグラデーションがある場合は、幅が1ピクセルでコンテナと同じ高さのグラフィックス（またはできればスケーリングを考慮して大きい）を使用し、それをページ。同様に、グラデーションがページ全体にわたる場合、高さは1ピクセルで、コンテナーよりも幅が広く、ページの下まで繰り返されます。

通常、コンテナが拡大または縮小したときに、コンテナがいっぱいになるように引き伸ばされているように見せるために、イメージをコンテナより大きくします。オーバーラップはコンテナの境界の外には表示されません。

カーブしたエッジを持つボックスのようなものに依存するエフェクトが必要な場合は、ボックスの左側をコンテナの左側に、十分なオーバーラップで（理由の範囲内で）コンテナの大きさに関係なく、コンテナの左側に貼り付けます。背景が不足している場合は、ボックスの右側の画像を湾曲したエッジでレイヤー化し、コンテナーの右側に配置します。したがって、コンテナが縮小または拡大すると、湾曲したボックス効果がそれに伴って縮小または拡大しているように見えます-実際にはそうではありませんが、何が起こっているかのような錯覚を与えます。

コンテナで実際に画像を縮小および拡大する場合、画像を背景として機能させるためにいくつかのレイヤートリックを使用し、コンテナで画像のサイズを変更するにはJavaScriptを使用する必要があります。CSSでこれを行う現在の方法はありません...

ベクターグラフィックスを使用している場合、私が恐れている私の専門知識の範囲をはるかに超えています。

これは私が作ったものです。ストレッチクラスでは、高さをに変更しましたauto。このようにして、背景画像は常に画面の幅と同じサイズになり、高さは常に適切なサイズになります。

#background {
    width: 100%;
    height: 100%;
    position: absolute;
    margin-left: 0px;
    margin-top: 0px;
    z-index: 0;
}

.stretch {
    width:100%;
    height:auto;
}

background-attachment行を追加します。

#background {
    background-attachment:fixed;
    width: 100%; 
    height: 100%; 
    position: absolute; 
    margin-left: 0px; 
    margin-top: 0px; 
    z-index: 0;
}

.stretch {
    width:100%;
    height:auto;
}

これは次のことと同じであることを指摘しておきます。

html { width: 100%; height: 100%; }
body { width: 100%; height: 100%; /* Add background image or gradient to stretch here. */}

-このためのもう一つの大きな解決策は、ページ上の身体または任意の要素に適用することができSrobbinのバックストレッチでhttp://srobbin.com/jquery-plugins/backstretch/

これを試して

http://jsfiddle.net/5LZ55/4/

body
{ 
    background: url(http://p1.pichost.me/i/40/1639647.jpg) no-repeat fixed; 
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

SolidSmileのチートのための追加のヒントは、幅を設定し、高さとしてautoを使用することにより、スケーリング（比例的なサイズ変更）することです。

例：

#background {
    width: 500px;
    height: auto;
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: 0;
}

border-image : yourimageプロパティを使用して画像を設定し、画面またはウィンドウの境界線全体に拡大縮小します。