ウサヲブログ  HOME

ウェブ制作に関わる備忘録などを綴ります

このページの位置: HomeCSS「サイトの背景に固定画像を設置する」の記事

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

CSSイメージ画像

ウサヲです。

これまでサイトの背景は、シンプルにカラーだけを使っていたのですが、新しいサイトを作るのに、画像を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);
    }
}

こんな感じです。

コメントを残す

日本語でお願いします。「テスト投稿」のような短い文は無視されます。

TOP