★背景画像の表示方法★
背景画像を表示する場合は
background-image:url()
または
background:url()
その後、background-size プロパティを指定します。
background-size:
background-size: 画像の幅 画像の高さ
例：
background-size: 200px auto;
background-size: 80% 80%;
background-size: 100% 100%;
下記のような指定方法もあります。
background-size: cover;
background-size: cover;
画像の幅と高さの比率は固定されたまま背景の表示領域を覆います。
background-size: contain;
background-size: contain;
表示領域が変更されても画像が全て表示されます。
background-size: contain;
background-size: cover;
background-size: 60% auto;
background-attachmentを指定します。
background-attachment
background-attachment：設定値
下記の設定が可能です。
background-attachment: fixed;
background-attachment: fixed;
背景画像の位置が固定されます。スクロールしても動きません。
background-attachment: scroll;
background-attachment: scroll;
画面スクロールで背景画像も移動します。
下記のような感じで設定します。
body{
background-image:url('http://IMAGE-URL');
background-repeat: no-repeat;
background-size: auto;
background-attachment : fixed;
}今回の問題は
スマホで見た時に背景画像が表示されない(画面に収まらない？)という点。
上記のようなCSS設定をしているのに、なぜかスマホで背景が表示されない。
色々と調べて(試して)いたところ、下記のような設定をすると表示されるようになりました。
body::before {
background:url('http://IMAGE-URL') no-repeat left top;
background-size: 100% auto;
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin:80px 0 0 0 ;
padding:0 0 0 0;
content: "";
z-index: -1;
}まとめ
色々な力をお借りしてこんな感じで解決しました。body::beforeでbodyに擬似要素を入れて、ブロックレベルにして、サイズを指定しました。擬似要素を使用する際にcontentは記述必須。記述が無いと動作しない。bodyの後にz-index: -1で重なりの順序を調整して無事に表示されました。
この辺りの設定を変えると、どう変化するのかは今後、検証していきたいと思います。
ご参考下さい(^o^)
