背景图片缩放代码打破html展示位置

Question

我正在使用bootstrap，我希望我的背景图像随页面缩放，所以这是我使用的样式代码：

html,
body {
  background: url(../imgs/ryze.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

它似乎有用，但它弄乱了我的html位置应该是这样的： Proper palcement(using template)

相反，html像这样在顶部聚集： What I get instead *

修改 这是我使用的HTML：

<div class="site-wrapper">

      <div class="site-wrapper-inner">

        <div class="cover-container">

          <div class="masthead clearfix">
            <div class="inner">
              <h3 class="masthead-brand">Cover</h3>
              <nav>
                <ul class="nav masthead-nav">
                  <li class="active"><a href="#">Home</a></li>
                  <li><a href="#about">Who Are We</a></li>
                  <li><a href="#contact">News and Events</a></li>
                  <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Products<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                      <li><a href="#">Ryze Vodka</a></li>
                      <li><a href="#">Inferno Whiskey</a></li>
                      <li><a href="#">Bourbon on Oak</a></li>
                      <li role="separator" class="divider"></li>
                      <li class="dropdown-header">Seasonal</li>
                      <li><a href="#">Liquid Candycane</a></li>
                      <li><a href="#">Locktenders' Gin</a></li>

                    </ul>
                  </li>
                  <li><a href="#contact">Contact</a></li>
                  <li> <a href="#">Where to Buy? </a></li>
                </ul>
              </nav>
            </div>
          </div>

          <div class="inner cover" id="ryze">
            <h1 class="cover-heading">Ryze Vodka</h1>
            <p class="lead">Our Ryze Vodka is made from locally grown winter wheat and rye, and is distilled three times through volcanic ash and active carbon for a smooth and clean finish</p>

          </div>

          <div class="mastfoot">
            <div class="inner">
              <p>Cover template for <a href="http://getbootstrap.com">Bootstrap</a>, by <a href="https://twitter.com/mdo">@mdo</a>.</p>
            </div>
          </div>

        </div>

      </div>

    </div>

这是在顶部备份的html，所有类都来自bootsrap模板。希望这有助于

Answer 1

以下是如何解决这个问题。向上拉页面并打开Developer Tools控制台（按cnrtl + shift + i）。突出显示行为不当的元素，Chrome会显示它的位置+填充+边距。

您可以修改开发工具中的CSS，以实时查看更改/修复。希望这会有所帮助。