css - Bootrstrap 3侧背景图片

Question

我有一个简单的 bootstrap 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;
    }
}

您的背景图像看起来像这样：