CSS Bootstrap : Having a background overflow the visible area

Question

我正在使用 Boostrap 3 创建一个页面。我有一部分内容被 4 列偏移并带有一些空白。我有一个 1200 像素宽的图像/背景，我想靠在列上，但超出页面左侧。

我的目标是，如果用户水平扩展浏览器，将显示更多背景，但绝不允许它与内容重叠。

关于如何实现这一点有什么想法吗？

这是我的代码:

<style>
    section#moreFeatures {
        background-image: url(/img/Backgrounds/moreFeatures.jpg);
        background-repeat: no-repeat;
        background-position: -540px 50%;
    }
</style>

<section id="moreFeatures" class="with-padding">
    <div class="container">
        <div class="row">
            <div class="col-sm-10 col-sm-offset-2 col-md-8 col-md-offset-4 col-lg-7 col-lg-offset-5">
                <h1>
                    Simple, Effective, and Elegant.
                    <br><small>Without sacrificing robust features.</small>
                </h1>
                <br>    
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin a ipsum sit amet metus blandit vestibulum. Cras et mauris eros. Nam sed eros at orci imperdiet pharetra. Pellentesque volutpat luctus lorem, quis sodales felis auctor vitae. Suspendisse potenti. Vivamus in purus magna. Etiam blandit neque ac pulvinar tincidunt. Morbi porta porttitor neque in tempus. Cras volutpat, enim sed vulputate accumsan, lectus sapien semper leo, sit amet malesuada erat sapien at dolor. Nullam nibh tellus, fermentum non elit et, ultrices hendrerit est.</p>
                <p>Quisque mollis nunc sagittis tellus molestie, at suscipit nulla posuere. Fusce interdum eu eros vel rutrum. Proin id arcu convallis, iaculis arcu sed, rutrum ligula. Aliquam dignissim faucibus ultrices. Sed facilisis ipsum vel tempus condimentum. Phasellus molestie ut risus et iaculis. Nulla sem tellus, consequat a magna pharetra, aliquet tincidunt eros. Cras velit lectus, lacinia nec nisi at, eleifend egestas sem. Aenean egestas dictum dui, eget mollis magna viverra imperdiet. Integer consequat libero dui, vitae viverra nunc malesuada adipiscing. Aliquam ac urna at sem placerat auctor.</p>
                <p>Duis eleifend tellus libero, eu varius tortor congue nec. Maecenas egestas metus ut adipiscing ultrices. Curabitur sit amet arcu massa. Curabitur a sapien sit amet lorem feugiat tristique a ut augue. Aliquam in elit vel quam sagittis viverra vel eu odio. Integer mi sem, lacinia id ullamcorper id, elementum ac lacus. Curabitur ante dolor, viverra ut libero vel, vulputate vulputate orci. Proin mollis felis in erat vulputate, ut ornare tellus porta. Donec tristique fermentum velit vel ultrices. Curabitur sed sapien ipsum. In sed odio malesuada, ornare lacus eget, elementum est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque vel rutrum nunc, id feugiat lorem. Nunc auctor dapibus ligula vel imperdiet.</p>
            </div>
        </div>
    </div>
</section>

Answer 1

你可以使用 -

section#moreFeatures {
    background: #dbdbdb url(http://lorempixel.com/1600/1600) fixed;
    background-repeat: no-repeat;
    background-position: center center;
}

点击查看 DEMO