スマートフォンでの固定背景について

main画像なんかでよく使うやつ。オシャレ系のサイトだと多い。

PCサイトならbackground-attachmentとbackground-size:coverで対応可能スマホやタブレットでは画像がめちゃくちゃ大きくなってしまったりするのでこの方法は使えない。

その為よく使われるのが、position:fixedを使う方法

    <div class="main-img">
        <div class="main-img__bg"></div>
    </div>
    <div class="contents"></div>

    //高さ確保
    .main-img{
        height: 100vw;
    }
    .main-img__bg{
        position: fixed;
        left: 0;
        top: 0;
        z-index :1
        width:100vw;
        height: inherit;
        background-image: url(../img/main-img.jpg) no-repeat center;
        background-size: 100% auto;
    }

    .contents{
        position: relative;
        z-index 2;
        background: #fff;
    }

実はページのいっちゃん下までスクロールしても表示されているけど z-indexで.contentsの奥側にいってるから見えないよねっていう仕組み。

contentsにbackgroundつけないと下の画像がスケスケになっちゃうので注意。
heightでvhじゃなくてvw使っているのはモバイルchromeなんかで、メニューバーが出た際にvhの値が変わってしまうから。

contentsにbackground記述しちゃうのはちょっとメンテナンス性悪そうなので body:beforeなんかでかぶせちゃったほうがいいのかも。

ちなみにこの方法で弱点が何個か。

この要素の上部に要素を置けない
1ページに一か所しかできない

できるっちゃーできるけど、jsであれこれしないといけないので大変めんどくさい。