视差背景图像全尺寸（宽度）答案

【问题标题】：Parallax Background Image Full Size (Width)视差背景图像全尺寸（宽度）
【发布时间】：2015-02-20 01:15:47
【问题描述】：

我试了很久才弄明白怎么做背景图

<div id="information" class="intro-section">
    <div class="row">
        <div class="col-xs-12">
        </div>
    </div>
</div>

覆盖浏览器屏幕的整个宽度。我总是得到一个在调整大小时甚至会发生变化的填充。我试图在所有地方更改 CSS 样式，但它不起作用。我使用 Bootstrap 作为服务器的外部链接，我的网络服务器上没有文件。

您可以查看我的网站www.careerharbour.co.uk 了解我的意思。背景图片的宽度和浏览器的屏幕之间总是有一个内边距。

【问题讨论】：

【解决方案1】：

您需要修改 #container1 或 container 类的 CSS 规则，或者将您希望全宽的 div 移到容器 div 之外。

您当前的 Bootstrap 容器类填充：

padding-right: 15px;
padding-left: 15px;

【讨论】：

【解决方案2】：

如果你只需要减少两边的 15px 内边距，就不需要编辑 css，

用<div class=row"></div>包装该容器类

或者如果您需要在所有视口中全屏显示该图像，您可以适当地使用container-fluid 和row-fluid。

【讨论】：

我这样做了，但它并没有太大变化，实际上它改变了图片的边框，但不知何故，它并没有按照我的意愿提供整个尺寸的背景图片。
@Xiangyu John Wu：- 您需要在所有屏幕上全宽显示气球图像吗？还是只保持大小并减少填充？
我希望它的宽度是全尺寸，直接触摸屏幕而没有任何左右填充，但它应该是一个视差图像，所以当你向下滚动时，它会消失。我现在实际上将重做整个代码。我认为我的代码中出现了问题，不知道是什么，但我做了很多实验，所以可能有些冲突。
为此，您需要在 container 类之外使用 container-fluid 类。因为container 类只有 1173px。最大限度。 container-fluid 是全宽的，您可以编写这样的代码 <div id="container3" class="container-fluid"> <div id="information" class="intro-section"> <div class="row"> <div class="col-xs-12"> </div> </div> </div> </div> 并从 #information 中删除 position:relative
好吧，我实际上重写了整个代码。没花太多时间，我将在几个小时后上传今天。现在它位于：www.careerharbour.co.uk/testing/index.html