文章で見るとわかりづらいですが、やりたいこととしてはこんな感じです。
一応動画も。
ブラウザの幅を縮めたり大きくしてもらったりするとわかると思うんですが、
縮めたとき、画像の中央が残る感じで、左側が消えていきますね。
実は、背景画像は特に何も指定をしない状態だと、左側から表示されるし、ブラウザ幅を縮めたときも左が残るようになっています。
こんな感じ↓
ちなみに、さっきのDEMOとこの動画は同じ画像を使っています。↓
画像の中央にかわいらしい猫ちゃんがいます。
DEMOはブラウザの幅を縮めても猫ちゃんが残るのに対し、後者のほうだと猫ちゃんが見切れていってしまいますね。
そんなのガッデムですね。
背景画像の中央にある部分をずっと表示しておきたい～！って時に使えるcss、それがbackground-positionです。
背景画像を指定しているプロパティに center を指定してあげれば、背景画像が中央起点になります。
background-image: url(neko.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;こんな感じ。
ちなみにbackground-positionは、
background-position : 左右 上下;という形式で位置の指定ができます。
background-position : center top;なら、左右方向は中央、上下方向は上部を起点にしますよーということです。
よくあるmarginとかpaddingとかのショートハンドとは逆なので注意。
入れられる値は top, center, bottom, left, right のほかに、
％やpxでの数値も入れられるので、気に入った配置にできるよう細かい調整が可能です！
これを応用して、たとえば min-width を併記してあげると、一定幅以下には縮まらないようにもできますし、
子要素にコンテンツがあるときにも同じ動きをさせることが出来て夢が広がりんぐですね。
ちなみに、背景画像だけを表示させたい場合（子要素にコンテンツが無い場合）は、heightなりpaddingなりで高さを持たせてあげないと画像が表示されないのでご注意！
それでは皆さん良い背景画像ライフを！！！
