将DIV放置在背景图像下，而不考虑视口（响应）

Question

我有一个1920x550px的大背景图像，我想直接在其下面放置一个div。由于我不知道如何显示完整图像，因此我使用了一个肮脏的把戏，并用透明部分实际填充了图像，因此它是1920x1080的图像，然后使用此显示它：

.bg-image-big{
    background: url(../images/header-bg-big.png) no-repeat center center fixed;
    background-color: #f7f7f7;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

这样可以使其始终全屏显示。现在有两个问题：在移动设备上不起作用（剪切图像），而且我不知道如何将内部div恰好放置在实际横幅的“末端”下方。从理论上讲，在1920x1080屏幕上，它是550px的页边空白。

<div class="section bg-light-gray bg-image-big">
   <div class="inner">
      <!-- placed right under the end of the banner -->
   </div>
</div>

任何更好的方法（肯定有）。任何提示表示赞赏！

就此而言，我正在使用Bootstrap3和FullPage.js

//编辑：

根据要求可视化：

我想要的是：

我所拥有的：完整桌面

反应灵敏

这不是大约6/8/12宽，而是关于那些元素的位置。希望这可以帮助更多...

Answer 1

我认为你走在正确的轨道上 - 我觉得你可能需要定义 的最小高度bg-image-big，以及将position类型定义为相对的；因为外部 div 的位置已定义，relative您应该能够执行以下操作：

.bg-image-big{
    margin:0px;
    padding:0px;
    position:relative;
    display:inline-block;
    background: url(http://viceland-assets-cdn.vice.com/viceblog/47451647MCQ-cloudcity.jpg) no-repeat center center fixed;
    background-color: #f7f7f7;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height:40vh;
    width:100%;
}

.inner {
    position: absolute;
    display: inline-block;
    padding:30px;
    left:50%;
    bottom:-100px;
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    width:50%;
    background:white;
    border: 5px solid black;
    text-align:center;
}

<div class="section bg-light-gray bg-image-big">
   <div class="inner">
      <!-- placed right under the end of the banner -->
      Behold, some content!
   </div>
</div>