html - 在 Bootstrap 行中重复 html 的背景图像

Question

我有一个非常简单的 HTML 页面，我使用找到的代码添加了背景图片 here .

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;
}

现在我正在尝试添加我的 Bootstrap 行，但我的页面全是空白，因为该行的背景颜色。我可以用 background-color 改变它，但我不能让它重复背景图像。

这是我的 html:

<div class="wrapper" role="main">
            <div class="container-fluid">
                <div class="row">
                    <header id="header" class="col-md-12">
                        <h1>System Name</h1>
                    </header>
                </div>
                <div class="row">
                    <section class="col-md-4 col-md-offset-4">
                        <img class="img-responsive center-block" src="images/logo.jpg"/>
                        <form class="col-md-8 col-md-offset-2" role="form" action="login.php" method="POST">
                            <div class="form-group">
                                <label for="login">Login:</label>
                                <input id="login" class="form-control" type="text"/>
                            </div>
                            <div class="form-group">
                                <label for="password">Pass:</label>
                                <input id="password" class="form-control" type="password"/>
                            </div>
                            <div class="checkbox">
                                <label><input type="checkbox">Remember</label>
                            </div>
                            <input class="btn btn-success" type="submit" value="Log In"/>
                        </form>
                    </section>
                </div>
            </div>
       </div>

如何设置相同的背景图片？ 我尝试了 background-color:transparent，但没有成功

Answer 1

我设法通过将 CSS 更改为来解决此问题

html, body { 
  background: url('http://www.lawofattraction4u.org/wp-content/uploads/2015/06/photodune-2102679-planet-earth-l.jpg') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Example pen here .

发生这种情况是因为您只在选择器中列出了 HTML，但正文实际上是您想要覆盖的内容。