Question

我正在尝试将背景图像拉伸到全宽。这是我的标记

  <body>
    <div class="container">
      <div class="text-center">
        <h3><a href="#" class="logo" >The Sound <span class="fa fa-volume-off" style="color:#EF4836;"></span>linic</a></h3>
      </div>
      <div class="vspace2"></div>
      <nav class="navbar text-center" role="navigation">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span style="color:#555;" class="fa fa-bars fa-2x"></span>
          </button>
       </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li><a class="fattify" href="#">About</a></li>
            <li><a class="fattify" href="#">Studio</a></li>
            <li><a class="fattify" href="#">Team</a></li>
            <li><a class="fattify" href="#">Contact</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
    </nav>

    <div class="first-main">
      <div class="text-center">
        Whatever I write here
      </div>
    </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>

我正在使用bootstrap。 first-main类中的背景图像不会拉伸到全屏宽度。我怎么能这样做？

这是额外的css部分：

.first-main{
    border-top: 5px solid #555;
    background : url('../../studio-1.jpg') no-repeat;
    background-size :100% auto;
    width : 100% ;
    height: 800px;
}

更新

Fiddle

Answer 1

你应该尝试使用CSS：

background-size:cover;

Fiddle

Answer 2

好吧，你的.container有保证金：0 15px;

基本上你可以在图像的容器上使用margin：0 -15px。如你所知，这不是最好的解决方案。对于这种布局，当您使用不同的宽度时，最好不要定义布局的默认值，在每个元素内放置一个边距而不是所有文档。你将来会避免这么多问题。

但正如我所说。 ..您可以使用保证金来“对齐”。

DEMO： http://jsfiddle.net/8t1gg3g1/5/

基本上你需要做的是在图像的容器中放置一些属性。

.first-main{
    border-top: 5px solid #555;
    background : url(http://votemenot.com/upload/398/3980.jpg) no-repeat;
    background-size :100% auto;
    width : 100% ;
    height: 800px;
    margin: 0 -15px;
    padding: 0 15px;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

内容框用于删除引导程序的边框默认值，这使得在使用填充时每个元素都不会增加宽度，正如您可能知道的那样。

但我建议您重新调整容器，以便将来不会出现问题。

DEMO： http://jsfiddle.net/8t1gg3g1/8/

背景图像拉伸全屏内容器

2 个答案: