質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.04%

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

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 4
  • VIEW 1,760

score 52

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

(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;}
}

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 4

check解決した方法

0

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/10/16 18:48

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

    キャンセル

0

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

-1

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/10/16 18:48

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.04%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る