Question

我一直在使用Bootstrap中的整页背景图像进行战斗。目前，背景图片覆盖了90％的页面，但我无法获得页面的最后10％。它的行为就像某处有一个底部边缘，但没有。

HTML：

<body>

  <div class="jumbotron">
    <div class="row">
        <div class="col-sm-12">
          <div class="text-center">
            <h1 style="font-weight: 400;" class="headline"><br></h1>
            <h2 style="font-weight: 400;" class="tagline"></h2>
          </div>
        </div>
      </div> 

      <div class="container">
        <div class="row">
          <div class="col-sm-6">
            <div class="embed-responsive embed-responsive-16by9">
            <iframe class="embed-responsive-item" src="https://player.vimeo.com/video/139447981" id="video"></iframe>
            </div>
          </div>

        <div class="col-sm-6">
          <div class="text-center">
            <h3><%= t('.call_to_action_headline') %></h3><br> 
            <h4 class="counter">123</h4>
            <p><%= t('.endline') %></p>

            <div class="subscribe text-muted text-center">
              <%= form_for @user do |f| %>
                <div class="row">
                  <div class="col-xs-12">
                    <div class="input-group">
                      <%= f.text_field :email, class: 'form-control form-control-lg',
                      placeholder: 'Your email' %>
                      <span class="input-group-btn">
                      <%= f.submit t('.submit_button'), class: 'btn btn-primary btn-lg' %>
                      </span>
                    </div>
                  </div>
                </div>
              <% end %>
            </div>
          </div>
        </div>
      </div> 
    </div>
  </div>
</body>

CSS：

@import url(https://fonts.googleapis.com/css?family=Lora:400,700);

@import "bootstrap";
@import "font-awesome";

body {
  background-color: #ffffff;
}

.headline {
  margin-top: 80px;
  color: white;
}

h3 {
  color: white;
}

#video {
  margin-bottom: 300px;
}

p {
  color: white;
}

.counter {
  font-size: 5rem;
  color: white;
}

.tagline {
  margin-top: 20px;
  margin-bottom: 100px;
  color: white;
}


.jumbotron {
  background: image-url('home-bg-1.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

  height: 100%;
  background-color: #ffffff;
  color: #ffffff;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);

  .jumbotron-text {
    min-height: 25rem;
    padding-top: 8rem;
    padding-bottom: 6rem;

    .container {
      max-width: 50rem;
    }
  }
}

我想要一个全屏背景图片。以下是它的外观：http://imgur.com/sdHJeZO

由于

Answer 1

默认情况下，大多数浏览器会添加一定数量的边距，这可能会导致问题。

以第一个小提琴为例：https://jsfiddle.net/n874j2yy/，如果您使用Chrome工具或浏览器检查器检查内容区域，您会注意到<body>标记中添加了8px的边距，这意味着.test div并未跨越视口的整个宽度。

在此示例中，我使用了viewport-height / viewport-width值：height: 100vh / width: 100vw。 https://jsfiddle.net/7u2yod66/1/。我还通过添加<body>

覆盖浏览器默认margin: 0页边距

不要在height: 100%上使用.jumobtron，而是尝试使用height: 100vh并手动从<body>代码（margin: 0）

中删除保证金

Answer 2

还有另一种技巧可以让网站上的背景图像始终只使用CSS覆盖整个浏览器窗口。

适用于Chrome，Firefox 3.6 +，Opera 10+和IE9 +。

html { 
   background: url(images/bg.jpg) no-repeat center center fixed; 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}

Example

其他全页背景技巧here。

Bootstrap整页背景

2 个答案: