css - Bootrstrap 3サイドの背景画像

Question

本文に があるシンプルなブートストラップ 3 ページがあります<div class="container">。

このメイン コンテナに最適な背景画像をページに配置したいと思います。ブートストラップの「応答レベル」ごとに画像を作成できます。

これを達成する最良の方法は何ですか?

ありがとう。

Answer 1

通常の画像の背景を使用し、背景画像をデザインして、画像のグラフィックがコンテナーの幅のサイズ (1170px lg コンテナー、970px) に従うようにします...

body {
   background: url('link/to/your/image_mobile.jpg') no-repat scroll center top;
}

@media (min-width: 768px) {
    body {
       background: url('link/to/your/image_tablet.jpg') no-repat scroll center top;
    }
}

@media (min-width: 991px) {
    body {
       background: url('link/to/your/image_small_desktop.jpg') no-repat scroll center top;
    }
}

@media (min-width: 1200px) {
    body {
       background: url('link/to/your/image_large_desktop.jpg') no-repat scroll center top;
    }
}

背景画像は次のようになります。