レスポンシブサイトの背景画像

Question

お世話になります。
現在サイトを制作しているのですが、
レスポンシブに関して問題があり質問させていただきます。

（bootstrap3.2.0テンプレートを元に編集して作成しています。
http://www.bootstrapzero.com/bootstrap-template/oleose）

背景画像を配置し、その上に文字を載せています。
画像は、media screenによって、スマホの場合、
スマホの画面サイズくらいの画像に置き換えられます。

動作チェックを行っていたところ、
PCでGoogle Chromeの横幅を小さくすると、ちゃんと表示されました。
Safariでも、ユーザーエージェントを変更して見るとちゃんと表示されます。
（画像参照）

しかし、iPhoneの実機、XcodeのiOS simulatorのSafariで確認すると、
下の画像のように、大きすぎる画像が配置されてしまいます。

width100%指定などしても解決に至らず、質問させていただくこととしました。

参考程度に一部ソース、CSSを抜粋して貼り付けておきます。

    <header>
        
        <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
                <div class="container">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                            <span class="fa fa-bars fa-lg"></span>
                        </button>
                        <a class="navbar-brand" href="index.html">
                            <img src="images/logo.png" alt="" class="logo" width="300">
                        </a>
                    </div>

                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="#about">a</a>
                            </li>
                            <li><a href="#features">b</a>
                            </li>
                            <li><a href="#reviews">c</a>
                            </li>
                            <li><a href="#screens">d</a>
                            </li>
                            <li><a href="#demo">e</a>
                            </li>
                        </ul>
                    </div>
                    <!-- /.navbar-collapse -->
                </div>
                <!-- /.container-->
        </nav>

        
            <div id="concept_area">
     		<div id="concept" class="sp-effect3 scrollpoint white">
				<p>文章</p>
		</div>
		<div id="concept2" class="scrollpoint sp-effect3 white" >
				<p>文章</p>
				</div>
            </div>

    </header>

.white{color:#ffffff;}
#concept{padding-top:250px; padding-bottom:50px; font-size:35px;}
#concept2{padding-bottom:20%; font-size:20px;}

 header{background-image:url(../../images/top_img.jpg);
	  background-position: center center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: cover;
      background-color: #464646;
	}

@media screen and (max-width: 730px) {
header{
	  background-image:url(../../images/s/top.jpg);
	  background-position: center center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: cover;
      background-color: #464646;
  }
  #concept{padding-top:200px; padding-bottom:50px; font-size:20px;}
#concept2{padding-bottom:50%; font-size:13px;}
.smtmargin{padding-top:120px;}
}

すみませんがご回答よろしくお願いいたします。

*コーポレートサイトのため、画像内のロゴや文章は消しています。

Answer 1

モバイルでのfixed表示を諦め、
headerではなく、divに指定することで解決いたしました。
fixedの表示ができていないので解決とは言えないかもしれませんが...。

#concept_area{background-image:url(../../images/s/top.jpg);
	  background-size:cover;
      background-repeat: no-repeat;
	}

シンプルな方法で解決いたしましたが、
y-neonさんの記事がかなり参考になります。

皆様ご回答ありがとうございました。

Answer 2

background-size: cover;
background-attachment: fixed;

この二つはスマホではうまく動かないそうです。
下記の記事が参考になります。
http://blog.phiyard.net/entry/2015/01/13/005920

Answer 3

HTMLのhead要素内にviewportの設定はしていますか？
していないのなら、

<meta name="viewport" content="width=device-width, initial-scale=1">

と記述してみてください。

Comments

[J4CK1E]

bootstrapを使用していますので、
もともとViewportの記述があります。

Answer 4

iPhoneの横幅は980px扱いなのでPC用の画像で表示してるのだと思いますよ。
viewpointを使うかmedia screenを980以下に指定するのが良いかと

Comments

[J4CK1E]

media screenを980px以下に設定してもダメです。
ちなみに他のセクションではちゃんと画像差し代わっています。