サイトの背景に固定画像を設置する

ウサヲです。
これまでサイトの背景は、シンプルにカラーだけを使っていたのですが、新しいサイトを作るのに、画像をfixで設置してみることにしました。今後もありそうな予感がするのでメモ。
画像を準備
レスポンシブのことも考えて、メディアクエリーを使って画像を3種類制御します。同じ画像を3種類用意します。
- パソコンのワイドサイズ用(約1280px以上)
- 中くらいのサイズ用(1280px−640px)
- モバイル用(640px未満)
CSS
こんな感じで、background-colorは、読み込みの時の見てくれを考慮して、設置する背景画像と同じようなカラーを用意します。
body { background-color: #1d3973; background-image: url(images/sampleImg.jpg); background-size: cover; background-attachment: fixed; background-position: center center; }
@メディアクエリーでレスポンシブに調整します。
@media screen and (max-width: 768px) { body { background-image: url(images/bgImg_middle.jpg); } } @media screen and (max-width: 480px) { body { background-image: url(images/bgImg_small.jpg); } }
こんな感じです。