質問: 背景を画面全体に広げる方法について、 PC版は安定してうまくいきますが、 スマートフォンでアクセスした際 具体的にはいちどiphoneの画面サイズで固定され、 スクロールした際、画面からはみ出る部分の背景が 表示されない状態、(白背景)になってしまいます。 以下のコードで実行しています。 --- @media screen and (min-width: 740px) { html { background: url(../images/example.png) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } } @media screen and (max-width: 739px) { html { background: url(../images/example.png) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } }
回答: これは全画面に広げる、と言うより**「(全画面)固定背景にしたい」**ということなのではないでしょうか? background-sizeの問題ではなく、`background-attachment`の問題です。 **モバイルでは今でも基本的にbackground-attachment:fixed;が効きません。** そのため、一般的には ``` position:fixed; width:100%; height:100%; ``` に指定したdiv要素等をモバイル時のみ表示させる、等の処理を行います。 **参考** スマホで背景fixedしたい時のCSSメモ