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

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

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

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

HTML5

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

1回答

575閲覧

画像JacaScriptで実装した可変背景画像をスマホ対応にしたい。

whoiwhoi

総合スコア48

CSS3

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

HTML5

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2019/07/31 09:08

編集2022/01/12 10:55

#現状
ページを読み込む度に背景画像が変わる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}

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2019/07/31 09:38

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

2019/07/31 09:56

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

2019/07/31 14:19

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

回答1

0

画像が縦に繰り返す

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

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

総合スコア114585

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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のブラウザで表示したところ両サイドに余白ができてしまいました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問