背景の画像を固定しよう

問題

今回の問題は、背景の画像を固定してスクロールしても画像の位置を変えないというものです。

背景の画像を固定しつつ、テキストレイヤーを最上部に持ってきて
背景画像は動かさず、スクロールした際にテキストとグレーエリアだけ動くよう
CSSファイルの指定の3つのセレクタを使用して見本どおりに実装してください。

※スクロールできるようにbodyタグにheightで高さをとりましょう。
例: body{height: 2000px;}

自分の環境に書くコード

              <section class="block">
    <div class="block__text">
        <p>テキストテキストテキストテキスト</p>
        <p>テキストテキストテキストテキスト</p>
        <p>テキストテキストテキストテキスト</p>
        <p>テキストテキストテキストテキスト</p>
        <p>テキストテキストテキストテキスト</p>
        <p>テキストテキストテキストテキスト</p>
        <p>テキストテキストテキストテキスト</p>
        <p>テキストテキストテキストテキスト</p>
        <p>テキストテキストテキストテキスト</p>
        <p>テキストテキストテキストテキスト</p>
    </div>
    <div class="block__layer"></div>
</section>
¥HTML¥

              .block {
    background-image: url(https://ninjacode.work/assets/img/kv.png);
}
.block__layer {
}
.block__text {
}
¥CSS¥

期待する画面

解答ソースコード

              <section class="block">
  <div class="block__text">
    <p>テキストテキストテキストテキスト</p>
    <p>テキストテキストテキストテキスト</p>
    <p>テキストテキストテキストテキスト</p>
    <p>テキストテキストテキストテキスト</p>
    <p>テキストテキストテキストテキスト</p>
    <p>テキストテキストテキストテキスト</p>
    <p>テキストテキストテキストテキスト</p>
    <p>テキストテキストテキストテキスト</p>
    <p>テキストテキストテキストテキスト</p>
    <p>テキストテキストテキストテキスト</p>
  </div>
  <div class="block__layer"></div>
</section>
¥HTML¥

              .block {
    background-image: url(https://ninjacode.work/assets/img/kv.png);
    position: relative;
    background-attachment: fixed;
    width: 100%;
    height: 1000px;
}
.block__layer {
    width: 100%;
    height: 1000px;
    background-color: #000;
    opacity: .6;
}
.block__text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    letter-spacing: 20px;
    color: #fff;
    z-index: 1;
}
¥CSS¥

解説

まずこのデザインのレイヤー(重なり)ですが
下から「画像エリア」「グレーレイヤー」「テキストエリア」の順になっております。

ですので、まず画像エリアにposition: relative;をかけ
テキストエリアには、position: absoluteをかけます。

画像エリアとグレーエリアの幅と高さは共通でOKです。
HTMLは基本、上から下にソースコードを読んでいきますので何もしなければ
テキストエリアがグレーレイヤーの下になり文字が隠れてしまいます。

ですので、文字を囲っているblock要素(.block__text)に対し、z-indexを1付与します。z-indexの値は高ければ高いほど、z軸の最上階になります。

画像を動かさないようにする方法は、画像エリアに対してbackground-attachment: fixed;をかけると背景画像が固定されます。

ログインして解答を見る

今回の問題は一見複雑そうに見えると思いますが、
レイヤー(階層)構造を理解すれば、シンプルに考えることができると思います。

レイヤーをコントロールするために使用するプロパティがz-indexプロパティです。
主な使い方としては、要素の重なり順を指定したい場合のみに使います。

注意点としては、positionプロパティの初期値であるstaticではz-indexが適用されません。必ず覚えておきましょう。