こんにちは、ひぐまです。

今回はCSSで、背景のみ、画面をスクロールしても固定して表示したい場合の指定方法をご紹介します。

早速ですがこちらのデモをご覧ください。

デモ

スクロールすると、テキスト部分はそのまま流れていきますが、背景画像は動かず、だんだんと領域の中で見切れていきます。

何をしているかというと、背景画像を指定したコンテンツに対してbackground-attachment:fixed;を指定することで、
背景画像の位置をビューポートに対する相対位置で固定しています。

HTML

 <main>
       <section>
            <h2>SECTION1</h2>
            <p>Lorem ipsum dolor sit amet. Quo quaerat nobis est dicta cumque et adipisci explicabo sit dolor numquam.<br>
            In molestiae officia aut voluptas porro sed sequi dolores.</p>
            <p>Et per spiciatis voluptas eum repudiandae fuga <strong>sedillum eius ad facilis praesentium sit voluptas saepe!</strong></p>
            <p>Est mollitia laudantium At illum tenetur eum libero voluptas aut aliquid fugiat ad quos totam.<br>
            A omnis aperiam et praesentium laborum ut aspernatur rerum sit dolores distinctio ut quos quia.<br>
            Qui corporis eligendi ea culpa incidunt sed eligendi cumque in dolores omnis et libero blanditiis.</p>
            <p>Sit Quis dignissimos quo accusantium molestiae 33 nihil asperiores eum galisum voluptas quo maxime repudiandae.</p>
        </section>

        <section>
            <div>
                <h2>SECTION2</h2>
                <p>Ad praesentium deleniti et explicabo temporibus aut eius obcaecati qui nulla laborum est possimus molestias ut internos commodi!<br>
                Ex alias magnam cum adipisci ratione a pariatur soluta et pariatur quia.<br>
                Qui totam velit est beatae iste ea repudiandae <strong>consequuntur qui alias explicabo qui porro molestiae sed dolor perspiciatis quodoloribus</strong> veritatis.</p>
            </div>
        </section>

        <section>
            <h2>SECTION3</h2>
            <p>Lorem ipsum dolor sit amet.<br>
            Rem iusto et quas Quis sed consequatur doloribus eum reprehenderit ullam eos dolores possimus.<br>
            Qui iusto odio aut ratione illo ea nisi nobis non deleniti aliquam qui veritatis dolor hic explicabo odit ut cumque quisquam.</p>
            <p>Qui repellat delectus At corporis veniam et earum quia ea exercitationem atque ut voluptas laudantium.<br>
            Quo voluptatum internos sit natus voluptatum ut voluptates sint aut eaque galisum rem fuga accusamus.</p>
        </section>

        <section>
            <div>
                <h2>SECTION4</h2>
                <p>Et asperiores natus in quibusdam officia ea sint internos.<br>
                33 consequatur molestias ut voluptas sapiente qui consequuntur magnam et aspernatur dignissimos id reprehenderit maxime.</p>
            </div>
        </section>
        <section>
            <h2>SECTION5</h2>
            <p>Est voluptatem quia non harum <strong>"delectus ut tenetur omnis et fuga perspiciatis et voluptatem ratione ad eius praesentium!"</strong><br>
            Sed Quis aperiam et ipsum iste sed ipsa dignissimos. Ab reiciendis consequatur ut cupiditate adipisci cum sunt aperiam in error labore vel esse voluptatibus! Sit voluptas dicta qui quia autem qui sunt odit sed odio cupiditate sit animi voluptate nam quia debitis.</p>
        </section>

        <section>
            <div>
                <h2>SECTION6</h2>
                <p>A dolor quod sed quia maiores in temporibus impedit cum quasi soluta ut harum galisum et expedita sunt eos explicabo odio.<br>
                Vel consequuntur iure sit odio possimus ex nesciunt molestiae qui nisi corrupti At voluptatem consequatur qui dolorum dolor.<br>
                Eum veniam vero in repudiandae praesentium aspernatur dicta et odio quos!</p>
                <p>Ut repellat libero et quia repellat et perspiciatis <strong>officiis aut esse quia ut esse voluptate At sunt nisi?</strong></p>
            </div>
        </section>
</main>

背景画像有の部分は中身のテキストが埋もれないように背景色を指定するためdivで囲んでいます。

CSS

	main > section{ margin:0 auto; padding:60px 6% 140px; }
	main > section p{ margin-top:1em; color:#484848; font-size:14px; font-size:1.4rem; }
	main > section > div{ width:80%; margin:0 auto; padding:35px; background:#fff; }
	/*奇数のセクションブロックに適用*/
	main > section:nth-of-type(odd){ background:#282828; }
	main > section:nth-of-type(odd) h2,
	main > section:nth-of-type(odd) p{ color:#fff; }
	/*指定された順番のセクションブロックに適用*/
	main > section:nth-of-type(2){ background:url(img/haikeikotei/hanabatake.jpg); background-attachment: fixed; }
	main > section:nth-of-type(4){ background:url(img/haikeikotei/Nemophila.jpg); background-attachment: fixed; }
	main > section:nth-of-type(6){ background:url(img/haikeikotei/garden.jpg); background-attachment: fixed; }

背景画像のないブロックは奇数のセクションに配置しているので、section:nth-of-type(odd)で背景色、文字色を一括指定してます。
詳しくは過去に書いたよく使う疑似クラスの紹介記事をご覧ください。

【初心者向け：疑似要素・疑似クラスの種類と基本的な使い方】

背景を固定したいブロックに、"background-attachment:fixed;"を指定してあげて完了です。