ウサヲです。

これまでサイトの背景は、シンプルにカラーだけを使っていたのですが、新しいサイトを作るのに、画像をfixで設置してみることにしました。今後もありそうな予感がするのでメモ。

画像を準備

レスポンシブのことも考えて、メディアクエリーを使って画像を３種類制御します。同じ画像を３種類用意します。

• パソコンのワイドサイズ用（約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);
    }
}

こんな感じです。