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

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

ただいまの
回答率

90.83%

  • HTML

    7788questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    4968questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    3489questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    1802questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

スマホでbackground-imageを使い、写真をループさせずに要素内いっぱいに表示するには

受付中

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 117

katliner

score 1

指定要素部分の背景を画像にして、スクロールしても背景の画像はスクロールされないというものを作っています。
ソースコード(必要な部分)

<html>
   <head>
      <style>
      center.main {
         background-attachment: fixed;
         background-image: url(/img/header.png);
         background-position: center;
         color: #ebebeb;
      }
      </style>
   </head>
   <body>
      <div>
         <center class="main">
         テスト<br>
         <h1>テスト</h1>
         </center>
      </div>
   </body>
</html>


しかし、background-attachment: fixed;はスマホだと効かないということを知り、スマホはスクロールしたら画像もスクロールされるというものにすることにしました。
写真は16:9くらいのものです。
写真の縦横比はそのままで要素内で写真がループしてしまわないようにしようと思い
background-size: auto 100%;
としましたが100%は親要素に対する大きさで、親要素は縦に長いのでスマホだと少しの部分しか見えませんでした。
そこで縦を要素自身の高さに合わせ、横は縦横比が合うようにするCSSはないでしょうか。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • dit.

    2018/05/28 16:53

    必要な部分のみ抜粋しているとのことですが、.mainの親はbodyではないということでしょうか?

    キャンセル

  • katliner

    2018/05/28 16:55

    .mainの前にdivがあります。記入漏れすみません

    キャンセル

  • yoshinavi

    2018/05/28 21:19

    「background-attachment: fixed;はスマホだと効かない」で検索すると色々出ますので、試されては如何でしょうか?また、<center>タグはHTML5では廃止になっていますので、予期せぬ動作の元になるので、div等に変える事をオススメします。

    キャンセル

  • katliner

    2018/05/28 21:23 編集

    「スマホで効かない」は調べて試して、それでも効かなかったので質問しました。centerの廃止は知りませんでした。ありがとうございます。

    キャンセル

回答 2

0

background-size: contain; とか。

【background-size - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/background-size

【background-sizeで背景画像をレスポンシブ対応する方法 | Gimmick log】
http://gimmicklog.main.jp/css3/747/

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/05/28 12:27

    containだと横に幅が合わせられて上下に沢山表示されてますね...

    キャンセル

  • 2018/05/28 12:30

    background-repeat: no-repeat;を入れるとスマホだと写真が表示されなくなりました。

    キャンセル

  • 2018/05/28 12:30

    >沢山表示
    background-repeat: no-repeat;

    【background-repeat - CSS: カスケーディングスタイルシート | MDN】
    https://developer.mozilla.org/ja/docs/Web/CSS/background-repeat

    キャンセル

  • 2018/05/28 12:33

    こんな情報もあるようです。

    【background-attachment: fixed がスマホで効かない問題は ::before で解決! | *Web Design 覚え書き*】
    http://webdesign.practice.jp/background-fixed-ios

    キャンセル

  • 2018/05/28 12:47

    これだと画面全体用...みたいな感じがしますね
    要素の中だけに写真を貼るのでちょっと違いますね
    イメージだとhttps://minecraft.net/ja-jp/realms/?ref=fmのプラットフォームを選択の背景ですかね

    キャンセル

  • 2018/05/28 13:50

    手元にiOSの端末が無いため、どういうものをイメージされているかがわかりませんでした。
    お役に立てなくてすみません。

    キャンセル

  • 2018/05/28 15:39

    https://appetize.io/demo?device=iphone7&scale=100&orientation=portrait&osVersion=11.3
    これを使えばiPhoneと同じ動作をしてくれます
    Safariを開いてURLのところにリンクをコピペすればOKです
    Ctrl+C(Command+C)でパソコンのクリップボードが使えるようです

    キャンセル

0

追記を拝見して回答を修正いたします。

最終的にどのようなレイアウトにされたいのか、
まだちょっとピンときていないので思った通りになるか解りませんが…

■要素の高さに合わせたければ背景画像はその要素に指定する事

が前提となります。

※HTMLの<center>タグは、他の方も仰っていらっしゃいますが
HTML4以降では確実に非推奨のため使用しない方がよいかと思います。
使用した場合、スマホやsafariなどのブラウザでバグが起こることを覚悟されてください。

下記修正してみました。

<html>
   <head>
      <style>
      .main {
         text-align:center; /* 要素を中央揃えにします。<center>の代わりです */
         background-attachment: fixed;
         background-image: url(/img/header.png);
         background-position: center;
         color: #ebebeb;
      }
   @media (max-width: 767px) { /* スマホの場合 */
    .main {
         background-attachment:inherit; /* fixedの解除。エラー予防 */
         background-size:cover; /* 要素全体に背景画像を合わせる */
      }
   }
      </style>
   </head>
   <body>
      <div class="main-wrap">
         <div class="main">
          テスト(h1があるのでbrはいりません。勝手に改行されます。文字を入れるなら、divやpで囲う方がいいと思います)
          <h1>テスト</h1>
         </div>
     ※もしここにも要素が入って、それを含めた背景画像にしたい場合は、背景の指定は.main-wrapになります。
      </div>
   </body>
</html>

.mainに高さ指定をしていないので、この形なら.mainの高さで背景は切れるはずです。
もし、.mainの外側の要素にも指定したいなら.main-wrapに背景指定を。
body全部に指定したいならbodyに指定してください。
(今仰っている、要素全部に背景が入って縦長になるっていう状態がこれっぽいですね)

.mainにかけてるのに背景の位置がおかしい場合、<center>がバグの原因の可能性が高いです。

レスポンシブコーディングをする際にはメディアクエリは必須となりますので、
もしご存知ない場合は勉強してみてください。

参考:https://techacademy.jp/magazine/9369

解決にお役立てできますよう。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/05/31 18:42

    <div>があり、その中の要素の中に画像を合わせたいということです。
    CSSでなくても<img>でできたりするのでしょうか?

    キャンセル

  • 2018/05/31 18:43

    coverは縦が親要素の高さに合わせられていて、画像の一部しか表示されませんでした...

    キャンセル

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

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

関連した質問

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

  • HTML

    7788questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    4968questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    3489questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    1802questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。