CSSだけでレスポンシブ対応背景画像の使い方とテクニック

背景に画像を入れる時は、CSSから画像を挿入します。

• 画像の挿入

  「background-image」プロパティを使って、画像を挿入します。

  URL関数を使って、保存してある画像の読み込み先を指定します。

  • 画像の読み込み
    Web練習フォルダ/

    ├index.html
    └css/

    └main.css

    └image/

    └paris.jpg

    画像の読み込み先のファイルパスを指定します。

    今回はCSSフォルダの「main.css」から画像を読み込みます。

    指定するファイルパスは「../image/paris.jpg」のように、「main.css」から画像を読み込みます。

    .back {
    background-image: url('../image/paris.jpg');
    }
  • 画像の大きさ

    背景画像を表示する時は、画像の大きさがはっきりと指定されている必要があります。

    今回は画像の横幅を「100%」高さを「400px」に指定します。

    .back {
    width: 100%;
    height: 400px;
    background-image: url('../image/paris.jpg');
    }
  大きさを指定しなかった場合

  CSSで背景画像を挿入する時は、「width」と「height」を指定する必要があります。

  もし大きさを指定しなかった場合は、画像の大きさは「0px」になります。

  つまり、実際に画像は表示されていますが、「0px」なので見えない状態になります。

  .back {

  width: 100%;
  height: 400px;

  }

• ポジション

  画像の位置を調整します。

  背景画像が要素の中心に来るようにします。

  「background-position」プロパティの値を「center」に指定します。

  .back {
  background-position: center;
  }
• サイズ

  画像のサイズを調整します。

  背景画像が要素全体にピッタリ収まるように、拡大または縮小します。

  画像によっては、はみ出た部分が切り取られたように見えます。

  「background-size」プロパティの値を「cover」に指定します。

  .back {
  background-size: cover;
  }
  切り取られたくない時

  使う画像によっては、切り取られたくないことがあるかと思います。

  そんな時は、切り取られないように画像全体を要素の中に収める方法があります。

  • contain

    画像は切り取られたくないけど綺麗に表示したい時はこのように指定します。

    「background-size」プロパティの値を「contain」に指定します。

    要素の大きさに合わせて、画像を拡大または縮小して画像全体が収まるようにします。

    .back {
    background-size: contain;
    }
• リピート

  画像を繰り返し表示をするか設定します。

  画像の大きさによっては、要素を埋めるように画像が繰り返し並んで表示されます。

  画像を繰り返し表示しない時は「background-repeat」プロパティの値を「no-repeat」に指定します。

  「no-repeat」に設定することで、画像の繰り返しを禁止します。

  .back {
  background-repeat: no-repeat;
  }

• 背景画像をまとめて設定

  CSSで背景画像を挿入する時に、綺麗に表示するようにまとめて設定します。

  「background」プロパティの値に「URL」「ポジション」「サイズ」「リピート」をまとめて指定します。

  1. URL
     Web練習フォルダ/

     ├index.html
     └css/

     └main.css

     └image/

     └paris.jpg

     URL関数を使って、保存してある画像の読み込み先を指定します。

     「main.css」から「paris.jpg」までの、ファイルパスを指定します。

     .back {
     background: url('../image/paris.jpg');
     }
  2. ポジション

     背景画像が要素の中心に来るようにします。

     URL関数の後ろに「center」を指定します。

     「background-position」の値を「center」にしています。

     .back {
     background: url('../image/paris.jpg') center;
     }
  3. サイズ

     背景画像が要素全体にピッタリ収まるように、拡大または縮小するようにします。

     先ほど指定したポジションの「center」の後ろに「cover」を指定します。

     その時に、「center / cover」のように「/」を間に挟んで指定します。

     「background-size」の値を「cover」にしています。

     .back {
     background: url('../image/paris.jpg') center / cover;
     }
  4. リピート

     画像を繰り返さないように設定します。

     先ほど指定したサイズの「cover」の後ろに「no-repeat」を指定します。

     「background-repeat」の値を「no-repeat」にしています。

     .back {
     background: url('../image/paris.jpg') center / cover no-repeat;
     }

背景画像の大きさは、はっきりと指定される必要があります。

例えば「img」タグのように高さを「auto」にしても、背景画像の場合は「0px」になります。

• 高さが固定される

  背景画像はあくまでも背景なので、要素に大きさはありません。

  画像の横幅は「100%」で画面サイズなどに合わせることが出来ます。

  ですが、高さを「auto」や「100%」にしても「0px」ままになります。

  そのため、背景画像の高さは固定の値で指定しないと表示が出来ません。

  .back {
  width: 100%;
  height: 400px;
  background: url('../image/paris.jpg') center / cover no-repeat;
  }
• スマホ対応が難しい

  背景画像は高さが固定されるため、スマホなどの小さな画面では大きすぎることがあります。

  画面の大きさごとに、画像の高さを変更する必要があります。

  • メディアクエリ

    画面サイズごとに画像の高さを変更するには、メディアクエリを使った方法があります。

    例えば、下記のように画面サイズで高さを変更します。

    画面サイズごとに画像の高さを上書きして、小さくします。

    /* パソコン */
    .back {

    width: 100%;
    height: 400px;
    background: url('../image/paris.jpg') center / cover no-repeat;

    }
    /* タブレット */
    @media (max-width: 768px) {

    .back {

    height: 300px;

    }

    }
    /* スマホ */
    @media (max-width: 425px) {

    .back {

    height: 200px;

    }

    }

背景画像をレスポンシブ対応します。

• レスポンシブ対応のやり方

  背景画像の高さは指定せずに、「padding」の余白を使います。

  「padding-bottom」で要素の下の余白を作って、要素の高さを作ります。

  1. 背景画像の横幅を広げる

     背景画像の横幅を「100%」にして、最大まで広げます。

     .back {
     width: 100%;
     background: url('../image/paris.jpg') center / cover no-repeat;
     }
  2. 解像度から高さを計算する
     =

     65.56%

     使用する画像の解像度から、縦と横の比率を計算します。

     今回は、横が「640px」縦が「426px」の解像度の画像を使用しています。

     横幅に対して、縦の大きさは何%か計算します。

     =

     画像の高さ

     画像の解像度を式に当てはめる。

     =

     0.665625

     求めた値を、%に変換する

     0.665625 × 100 = 66.5625%

     小数点第一位より下を切り捨て

     画像の高さ = 65.5%
  3. 背景画像の高さを作る

     解像度から求めた値を「padding-bottom」で余白を作って、要素の高さを作ります。

     「padding-bottom」の値を「65.5%」に指定します。

     .back {
     padding-bottom: 65.5%;
     }

• 背景画像のサイズ制限

  レスポンシブ対応した背景画像は、画面サイズに合わせてどこまでも大きくなります。

  背景画像が大きすぎるのもデザイン的によくないので、サイズを制限します。

  • 要素の構造

    背景画像を入れる「back」クラスの親要素に、サイズ制限をする「frame」クラスを作成します。

    「back」クラスは常に最大(100%)まで広がります。

    親要素の「frame」クラスの大きさで、画像サイズを制限します。

  • サイズの制限

    パソコンなどの大きな画面では、背景画像が大きくならないように制限します。

    画面サイズが「800px」より大きい時は、「frame」クラスの大きさを「800px」に固定します。

    さらに、「margin」の値を「auto」にして、背景画像が中央に寄るようにします。

    .frame {
    margin: 2em auto;
    max-width: 800px;
    }