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

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

html
1<html>
2   <head>
3      <style>
4      center.main {
5         background-attachment: fixed;
6         background-image: url(/img/header.png);
7         background-position: center;
8         color: #ebebeb;
9      }
10      </style>
11   </head>
12   <body>
13      <div>
14         <center class="main">
15         テスト<br>
16         <h1>テスト</h1>
17         </center>
18      </div>
19   </body>
20</html>

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

dit.

2018/05/28 07:53

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

katliner

2018/05/28 07:55

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

yoshinavi

2018/05/28 12:19

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

katliner

2018/05/28 12:23 編集

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

行動規範の内容に同意します

回答2件

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

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

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

が前提となります。

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

下記修正してみました。

HTML
1<html>
2   <head>
3      <style>
4      .main {
5         text-align:center; /* 要素を中央揃えにします。<center>の代わりです */
6         background-attachment: fixed;
7         background-image: url(/img/header.png);
8         background-position: center;
9         color: #ebebeb;
10      }
11　　　@media (max-width: 767px) { /* スマホの場合 */
12　　　　.main {
13         background-attachment:inherit; /* fixedの解除。エラー予防 */
14         background-size:cover; /* 要素全体に背景画像を合わせる */
15     　}
16　　　}
17      </style>
18   </head>
19   <body>
20      <div class="main-wrap">
21         <div class="main">
22         　テスト（h1があるのでbrはいりません。勝手に改行されます。文字を入れるなら、divやpで囲う方がいいと思います）
23         　<h1>テスト</h1>
24         </div>
25　　　　　※もしここにも要素が入って、それを含めた背景画像にしたい場合は、背景の指定は.main-wrapになります。
26      </div>
27   </body>
28</html>

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

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

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

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

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

投稿2018/05/29 02:04

編集2018/06/01 04:42

yyyy.yyyy

総合スコア53

katliner

2018/05/31 09:42

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

katliner

2018/05/31 09:43

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

行動規範の内容に同意します

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 03:24

kei344

総合スコア69400

katliner

2018/05/28 03:27

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

katliner

2018/05/28 03:30

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

kei344

2018/05/28 03:30

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

kei344

2018/05/28 03:33

こんな情報もあるようです。【background-attachment: fixed がスマホで効かない問題は ::before で解決！ | ＊Web Design 覚え書き＊】 http://webdesign.practice.jp/background-fixed-ios

katliner

2018/05/28 03:47

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

kei344

2018/05/28 04:50

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

katliner

2018/05/28 06:39

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

行動規範の内容に同意します

あなたの回答