【background】スマホで見た時にCSSで指定した背景画像が反映されない原因など

backgroundプロパティとは

backgroundは、背景に関する指定を行うプロパティです。

背景に、色をつけて透過した画像も中央に１つだけ表示して固定表示にしたいなあ。というとき、

background-color: #000;
background-image: url(bg.png);
bakcgounr-position: center;
background-repeat: no-repeat;
background-attachment: fixed;

と記載しても良いのですが、1つずつ指定しなくてもbackgroundでまとめて指定することができます。

background: #000 url(bg.png) center no-repeat fixed;

下記の順番で指定すればOKです。

①background-colorの値
②background-image値
③background-positionの値
④background-repeatの値
⑤background-attachmentの値

記載を省くとデフォルト値で指定されます。

background: #000 url(bg.png) center fixed;

これだとbackground-repiatの記載がないため、デフォルト値である「repeat」が適用されます。

参考

背景に関する設定をまとめて指定する：スタイルシート（CSS）辞典 - HTMLタグボード

まとめ

backgroundにまとめることで、コードが長くならず、他の人が手を加えるときにもわかりやすいんじゃないかと思いました。

スマホでbackground-attachment:fixedが効かない・・だと！？

ローカル環境で、ChromeやSafariの開発者モードにしてレスポンシブでの見え方を確認した時は、特に問題なかったのですが、デザイン環境を作ってもらい実際にスマホからアクセスすると背景画像が表示されていない事件が発生していました。

調べてみると2014年ぐらいからモバイル環境でbackground-attachment:fixedが無効となるようで、backgroundにfixedを含めて指定するとurlで指定した画像そのものが表示されないようです。

これだったらfixedを使っていないので表示される！

background: #000 url(bg.png) center no-repeat scroll;

これはNG！画像すらも表示されません！

background: #000 url(bg.png) center no-repeat fixed;

スマホの時だけスクロールにすることも考えたのですが、調べたところ::beforeを使うと解消できるとのことで、下記を参考に対応しました。

taroken.org

背景画像を表示したいのは一部のsectionだけだったのですが、position:fixedを使うと、他のsectionで取ったマージンに背景画像がひょっこり表示されてしまったりしたので、余白の少ないスマホで見たときだけ修正するようにしようと思い、スマホサイズでのみ、position:fixedを使うようにしました。（逆にめんどくさい？）


.bg {
    background: none;
  }

.bg::before {
    content: "";
    display: block;
    top: 0;
    left: 0;
    width: 100%;　/*幅を持たせる*/
    height: 100vh; /*高さを出す*/
    background: #000 url(bg.png) 50% 60% no-repeat fixed; /*PCの場合はこれで固定される*/
    background-size: 70%;
    z-index: -1; /*重なり順を変えないと、前面に出てしまう*/
}

@media screen and (max-width: 767px) {
  .bg::before {
    background: #000 url(bg.png) 50% 60% no-repeat;
    background-size: 90%;　/*サイズを変えたかった*/
    position: fixed; /*スマホの場合はこれで固定される！*/
  }
}

iphoneXとか画面が大きいので、横向きにした場合も考えるとメディアクエリの幅は812pxがいいのかもしれません。考え出したらきりがないのでやめました。

前述した通り、全体の後面に背景画像が表示されるようになるので、他のsectionの背景に、画像がひょっこり表示される場合があります。他のsectionにbackground-colorを指定したり、余白の取り方をmarginではなくpaddingで設定するといい感じでした。

まとめ

モバイルでbackground-attachment:fixedが効くようになったら平和ですね。
PCの開発者モードでは気づけないので、必ずモバイルで確認した方がいいなと思いました。
事前にこの問題を知っていたら、もっと考慮した設計ができただろうなと思いました。次から気をつけます！