#現状
ページを読み込む度に背景画像が変わるwebサイトを制作しています。
下記サンプルです。
サンプル

PCのブラウザで確認すると問題はありませんが、スマホで見ると画像が縦に繰り返す状態になっています。

#現状の画像

#background-repeat:no-repeat;を適用した場合

#実現したい状態

#実現したいこと
画像を繰り返すことなく、スマホの縦サイズに合わせて背景画像を表示したいです。
横サイズに合わせると画像の下が空きになるかと思いますので、縦サイズに合わせるので画像の両端が切れるかと思います。

#ソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4    <head>
5        <meta charset="UTF-8">
6        <meta name="viewport" content="width=device-width, initial-scale=1.0">
7        <meta http-equiv="X-UA-Compatible" content="ie=edge">
8        <title>test</title>
9        <link rel="stylesheet" href="style.css">
10        <script text="javascript">
11            var wall = new Array();
12            wall[0] = "0.jpg";
13            wall[1] = "1.jpg";
14            wall[2] = "2.jpg";
15            var rnd = Math.floor((Math.random() * 100)) % wall.length;
16            document.write('<style type="text/css"> body { background-image:url(', wall[rnd], '); } </style > ');
17        </script>
18    </head>
19
20    <body>
21    </body>
22
23</html>

CSS
1body {
2    background-position: center;
3    background-attachment: fixed;
4    background-size: cover;
5}

Lhankor_Mhy

2019/07/31 09:38

ご提示のリンクを拝見したのですが、「スマホで見ると画像が縦に繰り返す状態」が再現しませんでした。環境の問題でしょうか？当方は、iOS12 safari です。

oikashinoa

2019/07/31 09:56

android/chrome75で確認出来ました。画面中央横いっぱいに表示して、上下にも同じ画像が出てました…。質問者は画像貼ったほうが良いですよ。

whoiwhoi

2019/07/31 14:19

androidです。問題が発生している状態の画像を追加しました。

Lhankor_Mhy

2019/08/01 06:33

これかなあ？ https://stackoverflow.com/questions/14876035/background-size-cover-not-working-in-portrait-on-android-tablet

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

回答1件

画像が縦に繰り返す

ちょっと状況がわからないですが

css
1background-repeat:no-repeat;

も設定してやってはどうでしょうか？

オフセット調整

css
1background-position:0px 0px;

windowの縦サイズあわせ

CSS
1<style>
2body{
3 background-image:url(https://placehold.jp/ff0000/00ffff/800x100.png?text=0123456789abcdefghijklmnopqrstu);
4 background-repeat:no-repeat;
5 background-position: center 0px;
6 background-size: auto 100%;
7 background-attachment: fixed;
8}
9</style>
10<body>
111<br><br><br><br><br><br><br><br><br><br>
122<br><br><br><br><br><br><br><br><br><br>
133<br><br><br><br><br><br><br><br><br><br>
144<br><br><br><br><br><br><br><br><br><br>
155<br><br><br><br><br><br><br><br><br><br>
166<br><br><br><br><br><br><br><br><br><br>

投稿2019/07/31 09:21

編集2019/08/01 06:47

yambejp

総合スコア118164

whoiwhoi

2019/08/01 04:14 編集

ご回答いただきありがとうございました。 background-repeat:no-repeat; を書いたところ繰り返しが無くなりましたが、縦位置に画像サイズがあっていないため、下が余白になりました。画像を追加しましたので、よろしければご確認ください。

yambejp

2019/08/01 04:25

縦位置のオフセットがズレるという意味ですか？追記しました

whoiwhoi

2019/08/01 05:45 編集

>縦位置に画像サイズがあっていないため、下が余白になりました。分かりにくい表現で失礼いたしました。オフセットがズレているわけではありません。上記の「現状の画像」及び「background-repeat:no-repeat;を適用した場合」の画像の通り、スマホの横サイズに収まるように背景画像が伸縮されているので、スマホの縦サイズいっぱいまで収まるように背景画像を伸縮して表示したいです。言い換えると、現状：背景画像が欠くことなく表示されているが、スマホ画面の縦サイズを埋められないため、スマホ画面の縦サイズが埋まるまで画像を繰り返す実現したい状況：背景画像の両サイドは収まらないが、スマホ画面の縦サイズいっぱいまで背景画像が表示されるです。

yambejp

2019/08/01 05:54 編集

横長の画像を縦方向に間延びさせて崩れて表示してもかまわないということですか？それとも縦方向を埋めて横方法に余った部分はトリム（？）した感じにしたいのでしょうか？せっかくなので希望するイメージも適当に画像ではってもらえないですかね？

whoiwhoi

2019/08/01 06:20

希望するイメージを追加いたしました。よろしくお願いいたします。

yambejp

2019/08/01 06:48

windowの縦サイズ合わせの書き方を追記しましたコンテンツがないとバックグラウンドイメージの縦100%がとれないブラウザがあるので注意

whoiwhoi

2019/08/01 08:29

追記いただきありがとうございます。縦サイズいっぱいまで画像が表示されたのですが、PCのブラウザで表示したところ両サイドに余白ができてしまいました。