当サイトの検索クエリを見てみると、書いていない「background-attachment」が入っており、どうやら「linear-gradientの基本」「radial-gradient」あたりで書いた「backgroundを重ねる」という内容に引っ張られてきたようです。
background-attachmentはいまだにバグも出るし(主にfixed)、自分でも使わないので避けてきたのですが、現時点の自分の理解をまとめておこうと思います。
なお、background-colorとbackground-imageを重ねる方法については「背景画像にグラデーションをかける方法」に詳しく書いてあるので、そっちの重ね方をお探しの方は同記事におすすみください。
少し遠回りにすすむので順番としては、
- backgroundの位置とサイズを指定する
- background-imageを絶対 (or 相対)位置に固定する
- background-imageを複数配置して１つだけ固定したりする
ですすみます。
background-position
背景画像の基準点（スタート位置）は指定できます。指定しなければ要素の左上が基準点になります。
transform-originなど、他の位置指定プロパティと同じく基本的にx方向(横)とy方向(たて)の２つの位置を指定します。（xまたはyのどちらか１方向のみ指定した場合、相手は自動で50％になります。）
/* 基本の形式 */
#sample{
background-position: x y ;
}
/* x y を空白区切りで指定します */x y の指定方法 1：キーワード指定する
キーワードで位置指定。
top（上真ん中）、left（左辺真ん中）、right（右辺真ん中）、bottom（下真ん中）、center（中央）、top left(左上)、 top right（右上）、 bottom left（左下） bottom right（右下）
/* 例 */
#sample{
background-position: top right;
}x y の指定方法 2：長さ・％で指定
px emなどの長さ指定や％で位置指定するときは、左上からのX（横）・Y（たて）の距離を指定します。
たとえば、「top」と指定するのと、「50% 0%」と指定するのは同じです。
キーワードと長さを組み合わせて「top 30px left 100px」のように書くと、「topの位置から30px、left位置から100px」となります。
◆背景をつかった各サンプル
background-imageとレスポンシブデザイン
ほとんどのサイトではスマホ対応 = レスポンシブデザインですが、横長基調のPCと縦長基調のモバイル端末では当然背景の見え方も変わってしまうので、全画面背景はどこを基準に置くかで見え方が変わってきます。
background-attachment: fixed; を解説するほとんどのサイトがbackground-positionをcenterに設定しているのはそれが最も無難だからです。
端末サイズにあわせて背景もそのまま縮小してしまうのでなければ、端末ごとに背景をどのように切り取り、どのように見せるかを考えbackground-positionを指定する必要があります。
background-attachment
今回メインのbackground-attachmentについて。
ページをスクロールしたとき、
１・画面と一緒にスクロールして、ついてくる (scroll)
２・相対位置に固定 (local)
３・絶対位置で固定 (fixed)
のいずれかになるよう設定します。
見た目上、スクロールしても背景が動かないのは、scrollとfixed。
local は要素への相対的固定なので、要素が動けば一緒に動きます。
問題児のfixedですが、
まず公式バグとしては、
１・ iOSで、background-attachement:fixedとbackground-size: cover ; を併用してはいけません。
２・ fixedを使うべきはbodyなどの幅高さともに100％の要素です。先程のサンプルのようなブロックに使っても表示されなかったりします。（されなかった）
3・ fixedにbackground-positionを指定しても非表示になることがあります。
ついでにfixedは、あくまでモニターサイズを基準とした絶対位置なので、他に指定されたpadding・border・background-colorとの位置関係が狂いがち。
回避策としては、本来指定したい要素(仮にbody)に縦横100%の疑似要素をfixedで作り、疑似要素に背景設定をする。
body{
position: relative;
}
body::after{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-image: url(image-source.jpg);
background-size: cover;
}これが一番シンプルで確実です。
なんにせよ面倒なやつです。backgroundなんて初期からあるプロパティなだけにいまだにバグまみれなのが不思議です。
bodyの背景固定なら疑似要素あててfixed、ブロック要素の背景固定ならscroll。
background-imageの複数配置
複数配置と重なり方
background-imageプロパティはカンマ区切りで複数指定できます。
背景同士が重なってしまうとき、最初に書いた背景が最も上。後に書くほど下になります。
背景を複雑に重ね合わせるサイトを作るときは指定する順番に注意です。
background-attachmentも複数背景を指定できる
たとえば、
#{
background-image: url(A.jpg), url(B.jpg);
}と２つの背景を指定して、A背景を固定したいとき、
#{
background-attachment: fixed, local ;
}と、こちらもカンマ区切りで指定するとA背景にはfixed、B背景にはlocalが適用されます。
#{
background: url(A.jpg) fixed, url(B.jpg) local;
}のようにショートハンドで指定した方が早くて間違いもないですが、別に書く指定方法もできるということで。
