WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

スマホで高さを合わせて背景fixed

Mobile Safariでbackground-attachment:fixed;が効かない。
背景を入れたい要素に:beforeで背景を入れ、position:fixedで
同じような効果を出す。

body::before {
  content: "";
  display: block;
  background:      
    url("../img/common/bg.jpg") no-repeat center top;
  background-size: cover;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

レスポンシブでスマートフォンに切り替わった時に
高さに合わせて背景を拡大したく、background-size: cover;にしたが、
ブラウザのUIが出たり消えたりする度に背景のサイズが変わってしまうので
通常のスマホサイトで背景を高さ合わせて背景を拡大したい場合は
background-sizeの値を大きくする方が良さそう。

参考サイト

qiita.com