レスポンシブCSSの背景画像

私はウェブサイト（g-floors.eu）を持っていて、背景（cssではコンテンツのbg-imageを定義しました）も反応させたいです。残念ながら、私が考えることができる1つのことを除いて、これを行う方法についてはまったくわかりませんが、これはかなりの回避策です。複数の画像を作成し、CSS画面サイズを使用して画像を変更しますが、これを実現するためのより実用的な方法があるかどうか知りたいです。

基本的に私が達成したいのは、画像（ウォーターマーク 'G'付き）が自動的にサイズ変更され、表示される画像が少なくなることです。もちろん可能なら

リンク：g-floors.eu

これまでに持っているコード（コンテンツ部分）

#content {
  background-image: url('../images/bg.png');
  background-repeat: no-repeat;
  position: relative;
  width: 85%;
  height: 610px;
  margin-left: auto;
  margin-right: auto;
}

ブラウザーウィンドウのサイズに基づいて同じ画像を拡大縮小する場合：

background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;

幅、高さ、またはマージンを設定しないでください。

編集：幅、高さ、またはマージンを設定しないという前の行は、ウィンドウサイズでのスケーリングに関するOPの元の質問を参照しています。他のユースケースでは、必要に応じて幅/高さ/マージンを設定することができます。

このコードにより、背景画像は中央に移動し、divサイズの変更に合わせてサイズを固定します。小、大、通常のサイズに適しています。すべてに最適です。背景サイズまたはdivサイズが変更される可能性があるプロジェクトに使用します。

background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;

これを試して ：

background-image: url(_images/bg.png);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;

CSS：

background-size: 100%;

これでうまくいくはずです！:)

これが、私が使用するレスポンシブな背景画像のsass mixinです。それはあらゆるblock要素で機能します。もちろん同じことがプレーンなCSSでも機能し、padding手動で計算する必要があります。

@mixin responsive-bg-image($image-width, $image-height) {
  background-size: 100%;
  height: 0;
  padding-bottom: percentage($image-height / $image-width);
  display: block;
}


.my-element {
  background: url("images/my-image.png") no-repeat;

  // substitute for your image dimensions
  @include responsive-bg-image(204, 81);
}

例http://jsfiddle.net/XbEdW/1/

これは簡単なものです=）

body {
    background-image: url(http://domains.com/photo.jpeg);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

jsFiddleデモを見てください。

これが私が得た最良の方法です。

#content   {
    background-image:url('smiley.gif');
    background-repeat:no-repeat;
    background-size:cover;
}

w3schoolsを確認する

その他の利用可能なオプション

background-size: auto|length|cover|contain|initial|inherit;

使った

#content {
  width: 100%;
  height: 500px;
  background-size: cover;
  background-position: center top;
}

本当にうまくいきました。

#container {
    background-image: url("../images/layout/bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 100vh;
    margin: 3px auto 0;
    position: relative;
}

下の画像の高さ/幅にパディングを追加することでレスポンシブなWebサイトx 100 = padding-bottom％：

http://www.outsidethebracket.com/sensitive-web-design-fluid-background-images/

より複雑な方法：

http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios

背景eq Firefox Ctrl + Mのサイズを変更して、魔法のように素晴らしいスクリプトを確認してください。

http://www.minimit.com/demos/fullscreen-backgrounds-with-centered-content

これを使えます。私はテストし、その動作は100％正しいです：

background-image:url('../images/bg.png'); 
background-repeat:no-repeat;
background-size:100%;
background-position:center;

この画面サイズシミュレータで応答性を使用してWebサイトをテストできます。http： //www.infobyip.com/testwebsiteresolution.php

変更を行うたびにキャッシュをクリアします。Firefoxを使用してテストすることをお勧めします。

他のサイトやURLなどの画像形式を使用したくない場合： background-image:url('../images/bg.png'); //この構造では、ホストされている独自のサーバーからの画像を使用します。次に、次のように使用します。 background-image: url(http://173.254.28.15/~brettedm/wp-content/uploads/Brett-Edmonds-Photography-14.jpg) ;

楽しい ：）

アスペクト比に関係なく画像全体を表示したい場合は、次のことを試してください。

background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:100% 100%;
background-position:center;

画面サイズに関係なく、画像全体が表示されます。

    <style> 
         * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

#res_img {
  background: url("https://s15.postimg.org/ve2qzi01n/image_slider_1.jpg");
  width: 100%;
  height: 500px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  border: 1px solid red;
}

@media screen and (min-width:300px) and (max-width:500px) {
  #res_img {
    width: 100%;
    height: 200px;
  }
}

    </style>

<div id="res_img">
</div>

たった2行のコードで動作します。

#content {
  background-image: url('../images/bg.png');
  background-size: cover;
}

jQueryによる二乗比の適応

var Height = $(window).height();
var Width = $(window).width();
var HW = Width/Height;

if(HW<1){
      $(".background").css("background-size","auto 100%");
    }
    else if(HW>1){
      $(".background").css("background-size","100% auto");
    }

background:url("img/content-bg.jpg") no-repeat;
background-position:center; 
background-size:cover;

または

background-size:100%;

私は、それを行う最善の方法はこれだと思います：

body {
    font-family: Arial,Verdana,sans-serif;
    background:url("/images/image.jpg") no-repeat fixed bottom right transparent;
}

この方法では、これ以上何もする必要はなく、非常に簡単です。

少なくとも、それは私には有効です。

お役に立てば幸いです。

使用してみてくださいbackground-sizeが、1つは幅、もう1つは高さの2つの引数を使用してください

background-image:url('../images/bg.png'); 
background-repeat:no-repeat;
background-size: 100% 100%; // Here the first argument will be the width 
// and the second will be the height.
background-position:center;

background: url(/static/media/group3x.6bb50026.jpg);
background-size: contain;
background-repeat: no-repeat;
background-position: top;

positionプロパティを使用して、必要に応じて上下と中央を揃えることができます。background-sizeは、中央のトリミング（カバー）または完全な画像（含むまたは100％）に使用できます。