幅に合わせるCSS背景画像、高さは比例して自動スケーリングする必要があります

私が持っています

body {
    background: url(images/background.svg);
}

望ましい効果は、この背景画像の幅がページの幅と同じになり、高さが比率を維持するように変更されることです。たとえば、元の画像が偶然にも100 * 200（任意の単位）であり、本文の幅が600pxである場合、背景画像は高さが1200pxになるはずです。ウィンドウのサイズが変更されると、高さが自動的に変更されます。これは可能ですか？

現時点では、Firefoxは高さを調整して幅を調整しているようです。これはおそらく、高さが最長の寸法であり、トリミングを回避しようとしているためでしょうか？私が欲しい縦にトリミングし、その後、スクロール：なし水平方向の繰り返しを。

また、Chromeは画像を中央に配置してbackground-repeat:repeatいます。明示的に指定された場合でも、繰り返しは行われません。これがデフォルトです。

このためのCSS3プロパティ、つまりbackground-size（互換性チェック）があります。長さの値を設定することもできますが、通常は特別な値であるcontainと一緒に使用されますcover。あなたの特定のケースでは、あなたは使うべきですcover：

body {
    background-image:    url(images/background.svg);
    background-size:     cover;                      /* <------ */
    background-repeat:   no-repeat;
    background-position: center center;              /* optional, center the image */
}

以下のためのEggsplanation containとcover

駄洒落で申し訳ありませんが、私はデモのためにBiswarup Gangulyの日の写真を使用します。これがあなたの画面で、灰色の領域が目に見える画面の外にあるとしましょう。デモでは、16x9の比率を想定します。

前述の当日の写真を背景として使用します。ただし、何らかの理由で画像を4x3にトリミングしました。私たちは、設定することができbackground-size、いくつかの固定長にプロパティを、私たちは、に焦点を当てるcontainとcover。また、の幅または高さ、あるいはその両方をマングルしなかったと想定していbodyます。

contain

contain

固有のアスペクト比（ある場合）を維持しながら、幅と高さの両方が背景の配置領域に収まるように画像を最大サイズにスケーリングします。

これにより、背景画像が常に完全に背景の配置領域に含まれるようになりますがbackground-color、この場合、で空のスペースが埋められる可能性があります。

cover

cover

固有のアスペクト比（ある場合）を維持しながら、幅と高さの両方が背景の配置領域を完全にカバーできるように、画像を最小サイズにスケーリングします。

これにより、背景画像がすべてを覆っていることを確認できます。表示されませんが background-color、画面の比率によっては、画像の大部分が切り取られる可能性があります。

実際のコードによるデモ

div > div {
  background-image: url(http://i.stack.imgur.com/r5CAq.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #ccc;
  border: 1px solid;
  width: 20em;
  height: 10em;
}
div.contain {
  background-size: contain;
}
div.cover {
  background-size: cover;
}
/********************************************
 Additional styles for the explanation boxes 
*********************************************/

div > div {
  margin: 0 1ex 1ex 0;
  float: left;
}
div + div {
  clear: both;
  border-top: 1px dashed silver;
  padding-top:1ex;
}
div > div::after {
  background-color: #000;
  color: #fefefe;
  margin: 1ex;
  padding: 1ex;
  opacity: 0.8;
  display: block;
  width: 10ex;
  font-size: 0.7em;
  content: attr(class);
}

<div>
  <div class="contain"></div>
  <p>Note the grey background. The image does not cover the whole region, but it's fully <em>contained</em>.
  </p>
</div>
<div>
  <div class="cover"></div>
  <p>Note the ducks/geese at the bottom of the image. Most of the water is cut, as well as a part of the sky. You don't see the complete image anymore, but neither do you see any background color; the image <em>covers</em> all of the <code>&lt;div&gt;</code>.</p>
</div>

https://developer.mozilla.org/en-US/docs/CSS/background-sizeからのヒントに基づいて、私のために働いた次のレシピで終わります

body {
        overflow-y: hidden ! important;
        overflow-x: hidden ! important;
        background-color: #f8f8f8;
        background-image: url('index.png');
        /*background-size: cover;*/
        background-size: contain;
        background-repeat: no-repeat;
        background-position: right;
}

何を探しているのか正確にはわかりませんが、CSS-TricksのChris Coyierが書いた次の優れたブログ投稿をぜひチェックしてください。

http://css-tricks.com/how-to-resizeable-background-image/

http://css-tricks.com/perfect-full-page-background-image/

各記事の説明を読み、それらがあなたが探しているものかどうかを確認してください。

最初は次の質問に答えます：

背景画像のサイズを変更できる方法はありますか？のように、ブラウザーウィンドウのサイズに関係なく、Webページの背景を端から端まで画像で塗りつぶします。また、ブラウザウィンドウの変化に応じて、サイズを変更します。また、比率が維持されていることを確認してください（奇妙なストレッチをしないでください）。また、スクロールバーが発生せず、必要に応じて垂直方向に切り取られます。また、インラインタグとしてページに表示されます。

2番目の投稿の目的は、「常にブラウザーウィンドウ全体を覆うWebサイトの背景画像」を取得することです。

お役に立てれば。

背景画像が完全に設定されていない場合、彼のcssは問題作成であるため、彼のcssファイルは以下のコードに変更されます

html {  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-position: 0% 0%;
  background-size: 100% 100%;
}

％; 背景サイズ：100％100％; "

これを試して、

element.style {
    background: rgba(0, 0, 0, 0) url("img/shopping_bgImg.jpg") no-repeat scroll center center / cover;
}

次の1行を追加するだけです。

    .your-class {
        height: 100vh;
    }

vhはビューポートの高さです。これにより、デバイスのブラウザウィンドウに合わせて自動的に拡大縮小されます。

詳細はこちら：divをブラウザーウィンドウの高さ100％にする

body{
    background-image: url(../url/imageName.jpg);
    background-attachment: fixed;
    background-size: auto 100%;
    background-position: center;
}

同じ問題があり、ブラウザーのサイズを調整するときに画像のサイズを変更できませんでした。

悪いコード：

html {  
  background-color: white;  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-attachment: scroll;  
  background-position: 0% 0%;
}

良いコード：

html {  
  background-color: white;  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-attachment: scroll;  
  background-position: 0% 0%;
  background-size: contain;
}

ここで重要なのは、この要素の追加です-> background-size：contains;

これが私のために働いたものです：

background-size: auto 100%;

背景サイズの設定は役に立ちません、次の解決策が私のために働きました：

.class {
    background-image: url(blablabla.jpg);
    /* Add this */
    height: auto;
}

それは基本的に画像をクロップしてフィットさせますが、background-size: contain/coverそれでもフィットしませんでした。