超大 - 全屏背景 - 只有一半？答案

【问题标题】：Supersized - Full Screen Background - Only on the half?超大 - 全屏背景 - 只有一半？
【发布时间】：2015-03-10 05:00:03
【问题描述】：

我想使用超大全屏背景Supersized

但我希望滑块仅位于站点的右半部分，而我希望在左侧具有我的内容。当我滚动内容应该移动并且背景保持不变。喜欢这里：example site

有人有想法吗？

编辑：好的，我明白了，但我怎样才能使图像响应？有可能吗？

【问题讨论】：

标签： jquery html css supersized

【解决方案1】：

.supersized {position:fixed;width:50% top:0;bottom:0;}

【讨论】：

【解决方案2】：

如果你用开发工具浏览，你会看到：

#supersized {
    position: fixed;
    right: 0;
    top: 0;
    overflow: hidden;
    z-index: -999;
    height: 100%;
    width: 50%;
}

【讨论】：

【解决方案3】：

包含内容的 DIV 应该有一个溢出滚动：

<style>
    .content{
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 50%;
        overflow: scroll;
    }
    .the-bg{
        background-image: ...;
        background-size: cover;
        position: absolute;
        left: 50%;
        top: 0;
        bottom: 0;
        width: 50%;
    }
</style>

<div class="content">lorem ipsum</div>
<div class="the-bg"></div>

或者，你可以把右边的固定：

<style>
    .content{
        float: left;
        width: 50%;
    }
    .the-bg{
        background-image: ...;
        background-size: cover;
        position: fixed;
        left: 50%;
        top: 0;
        bottom: 0;
        width: 50%;
    }
</style>

<div class="content">lorem ipsum</div>
<div class="the-bg"></div>

【讨论】：