Html 引导：如何使背景图像位于容器边缘和身体边缘之间？

我目前正在开发一个使用Twitter引导的网站。在网站的设计中，我有一个背景图像，位于容器边缘和身体边缘之间

下面是我的代码

HTML:

上面的代码只是将背景图像应用到我的部分的右下角。我需要确保背景图像在不拦截容器的情况下处于最大宽度

这是一张图表，它可以更好地解释我要做的事情

我如何在不使用jQuery/Javascript的情况下实现这种效果

---

提前谢谢

我想这就是你想要的--

请翻页查看

检查代码段

。容器流体{
背景：url（'http://www.jonomus.net/wp-content/uploads/2015/10/Screenshot_2015-10-20-10-06-10.png');
背景位置：右下角；
背景重复：无重复；
背景尺寸：130px 130px；
}
.col-xs-6{
背景颜色：黄色；
颜色：红色；
高度：400px；
}

乱数假文。

仅CSS-不使用jQuery/Javascript

您可能知道，引导

.container

像素宽度根据屏幕宽度而变化。有3个单独的媒体查询用于此。您可以在每个引导断点处以相同的方式调整背景图像大小

section {
   min-height: 100vh;
   background-image: url('//placehold.it/300');
   background-repeat: no-repeat;
   background-position: right bottom; 
   background-attachment: fixed;
}    

@media (min-width: 768px) {
    section {
        background-size: calc((100% - 750px)/2);
    }
}
@media (min-width: 992px) {
    section {
        background-size: calc((100% - 970px)/2);
    }
}
@media (min-width: 1200px) {
    section {
        background-size: calc((100% - 1170px)/2);
    }
}

演示：

---

注意：在

xs

屏幕上，容器变为100%宽度，因此您的背景图像将消失。

发布您迄今为止尝试过的代码需要您当前的代码，否则不可能说使用容器流体而不是部分。使用col-xs-6，否则它将覆盖整个页面

section {
   background-image: url('example.png');
   background-repeat: no-repeat;
   background-position: bottom right;
}

section {
   min-height: 100vh;
   background-image: url('//placehold.it/300');
   background-repeat: no-repeat;
   background-position: right bottom; 
   background-attachment: fixed;
}    

@media (min-width: 768px) {
    section {
        background-size: calc((100% - 750px)/2);
    }
}
@media (min-width: 992px) {
    section {
        background-size: calc((100% - 970px)/2);
    }
}
@media (min-width: 1200px) {
    section {
        background-size: calc((100% - 1170px)/2);
    }
}