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

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

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

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

Q&A

解決済

2回答

1348閲覧

スマホCSSについて教えて下さい。

enokiyo

総合スコア78

CSS3

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

0グッド

0クリップ

投稿2015/10/09 01:54

編集2015/10/09 02:19

背景画像を敷き詰めたいのですが、ブラウザの高さでいっぱいに表示したく
body要素にbackground-size:cover;

を指定しているのですが
どうもコンテンツの高さに敷き詰められるらしく縦にものすごく伸びてしまいます。

PCとスマホブラウザの挙動の違いについておしえてください。

追記

期待する動作:
スマホ画面サイズに縦にはまる背景画像、縦横比率は維持なので横が切れても問題なし。

実際の動作:
画面をサイズではなくコンテンツサイズに伸ばされて配置される。

という現象です。

これは正しい挙動であれば、別の方法を考えます。

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

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

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

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

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

guest

回答2

0

body要素の高さは基本的に中に入っているコンテンツの高さなので、
コンテンツ量が画面サイズより多く縦スクロールする状態になっているのであれば
body要素もそれだけ高さが大きくなっています。
なので、body要素にbackground-size: cover;で背景画像指定すれば
body要素の高さ全体を覆うように拡大されてしまうのは当然の挙動ですね。

投稿2015/10/09 05:14

aKusano

総合スコア3763

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

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

0

ベストアンサー

background-size:cover;
は縦横比を保持したまま表示領域を全て覆うように表示されるので、
縦長になるスマホでは縦に伸びます。

どういう背景画像なのかわかりませんが、
縦にrepeatさせるとかではだめなのでしょうか?
もしくはスマホようの背景画像を別に用意するとかですね。

投稿2015/10/09 02:07

y-neon

総合スコア106

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

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

enokiyo

2015/10/09 02:11

やはり正しい挙動なのですね
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問