cssについて、レスポンシブな背景指定

質問

背景を指定し表示させる上で、PCだと何の問題無く表示されるのですが
スマホ等画面の小さいでスプレイで見た際、背景画像が等倍では見ず来為、
画面サイズに合わせて縮小させたいと考えています、。
現状では、画面の幅が小さくなり、背景画像が等倍のまま表示されてしまいます。

以下の参考のサイトの場合、スマホの画面に合せて背景が縮小されるようなので、方法自体はあるようなのですが、どの様にすれば良いのか解らず、何か良い方法はありませんでしょうか？
http://jquery.shiftbrain.co.jp/

記述としては以下の様にかいております。

<section id="section_photo" class="common_section">
<div class="content">
<h2><img src="images/tit_01.png" alt="" /></h2>
</div>
</section>

.common_section {
width: 100%;
}

#section_photo {
background-attachment: fixed;
background-image: url("../images/bg_section_photo.jpg");
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}

どうぞよろしくお願いいたします。

回答No.3

sech1152

No.1です。
何度も補足をさせてしまって申し訳ありません。

いろいろ考えてみたのですが、基本的なところで勘違いしていたようです。

結論としては、質問文にあるとおりの
#section_photo {
background-attachment: fixed;
background-image: url("../images/bg_section_photo.jpg");
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
で、大丈夫なはずです。

これで、うまく拡大縮小されないように見えるのは、用意した画像の縦横比と、指定した表示領域（background-attachment: fixed;を指定したということは、sectionではなく画面全体か？）の縦横比との関係によるようです。

background-size: cover;
と指定することで、指定した表示領域を隙間なく埋めるために、画像の縦横を同じ比率で拡大縮小します。

このとき、画像の縦横比と、表示領域の縦横比が合っていない場合、たとえば、画像の方が横長の場合、縦を表示領域に合わせて拡大縮小し、それと同率で横も拡大縮小します。
そうすると、横がはみ出ますのでその部分はカットされて表示されます。
この状態で画面の幅だけを変化させると、表示領域の縦は変わらないので、幅がカットされた範囲を超えない限り、画像の拡大縮小率は変化しません。
カットされた範囲を超えてさらに幅を広くしようとすると、今度は、幅に合わせて画像を拡大し、縦がカットされます。

もしかしたら、まだ何か勘違いしているかもしれませんが、とりあえず回答しておきます。

回答No.2

sech1152

No.1です。

補足の
>「本書籍の一部を無料公開」や、そこから少し下の「Event」という辺りの背景です。
についてですが、背景の本やビル（？）のことであれば、PCもスマホも等倍のまま表示されているように思いますよ。
まぁ、等倍がどれくらいの大きさになるかは、ディスプレイのDPIに依存しますので、PCとスマホでは違ってくると思いますが…。

メディアクエリについては、

「CSS メディア・クエリーを使ってレスポンシブ Web サイトを作成する」
https://www.ibm.com/developerworks/jp/web/library/wa-cssqueries/

「CSS3で使えるメディアクエリのタイプと特性の一覧 」
http://blog.asterlist.com/2013/01/1601.html

が、分かりやすいと思います。

メディアクエリの詳細については、
メディア・クエリーに関する W3C 勧告の日本語訳
http://www.asahi-net.or.jp/~ax2s-kmtn/internet/css/REC-css3-mediaqueries-20120619.html
が、詳しいと思います。

補足

お返事ありがとうございます。

ウインドウサイズにより背景が縮小されてゆく事はPCからでも確認は出来るのですが、
ブラウザのウインドウの幅を320px位に小さくして、同時にウインドウの「高さ」も縮めるとそのサイズに沿って背景が小さくなってゆく事が確認が出来ると思います。

また、スマホipuohe5s(safari)と並べて比べてみると、明らかに本や建物の大きさが違うのです。
幅が511pxより小さくなるとガクンと切り替わって小さくなっていくようなのです。
これは、<link href="css/jquery_book_s.css" rel="stylesheet" media="(max-width:511px)">
なのかな..とは思うのですが。

記述としては、firebug上で　background-size: cover;　を取ると縮小が解除されたので恐らくこれが関係するようですがまだここまでしかわかりませんでした。

メディアクエリについてのURLありがとうございます。
こちらも見てもう少し学習しようと思います。

回答No.1

sech1152

#section_photo {
background-attachment: fixed;
background-image: url("../images/bg_section_photo.jpg");
background-position: left top;
background-repeat: no-repeat;
background-size: 100%;
}
でどうでしょうか？

ところで、リンク先のサイトで背景が縮小されるように見えるものというのは、最初の、
jQuery
最高の教科書
と書かれている画像のことでしょうか?

この画像のことであれば、これは背景として指定されている画像ではなく、imgタグで表示されている画像です。

同じような方法でやるのであれば、たとえば、

<section id="section_photo" class="common_section">
<img src="images/bg_section_photo.jpg" alt="" id="backimage" />
<div class="content">
<h2><img src="images/tit_01.png" alt="" /></h2>
</div>
</section>

.common_section {
width: 100%;
position: relative;
}
.common_section .content {
position: relative;
}

#backimage {
position: absolute;
width: 100%;
}

みたいな感じになるでしょうか。

また、別の方法として、画面の幅によってCSSを選択する方法もあります。
さっきのリンク先のサイトでは、
<link href="css/jquery_book.css" rel="stylesheet">
<link href="css/jquery_book_m.css" rel="stylesheet" media="(max-width:1023px)">
<link href="css/jquery_book_s.css" rel="stylesheet" media="(max-width:511px)">
（一部抜粋）
と、メディアタイプを指定することにより、画面の幅が、特定しない、1023px以下、511px以下で適用するCSSファイルを換えています。
これらのCSSファイルの中で、それぞれ幅の違う背景画像を指定することができます。

複数のCSSファイルを読み込んだ場合に、競合する指定があったときは、原則として後から読み込んだものが有効になります。

補足

お返事ありがとうございます。
後で読み返すと何だかハチャメチャな文章ですみませんでした。。

リンク先のサイトで背景が縮小されるように見えるものというのは、
「本書籍の一部を無料公開」や、そこから少し下の「Event」という辺りの背景です。

まず、冒頭に書いて頂いた記述をまず試してみます。

まだまだ不勉強で聞くのも恥ずかしいのですが、
<link href="css/jquery_book_m.css" rel="stylesheet" media="(max-width:1023px)">
こういった方法がメディアクエリという物でしょうか？