レスポンシブWEBデザインで、CSSで画像を背景に設定した際に下方に固定する方法

更新日：2017年1月25日

最近の主流はもっぱらレスポンシブWEBデザインです。Googleはモバイルフレンドリーに続き、モバイルファーストインデックス（MFI）の実装を予告したりとこの流れはもう止めることは出来ません。スマホに対応させることが大変重要になってきますし、そうなると管理が楽なレスポンシブWEBデザインが最も適していると言えます。

しかしレスポンシブWEBデザインは画像が扱いづらいのが欠点だったりします。特に背景画像なんて設定しても思うようになってくれないことも少なくありません。

ということで、ここではレスポンシブWEBデザインで、CSSで画像を背景に設定した際に下方に固定する方法をご紹介します。
下記のように記述すればOKです。

body {
	background-image: url(background.jpg);
	background-attachment: fixed;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

background-image: url(background.jpg);の部分は背景に設定したい画像に対するパスになりますので、書き換えて下さいね。