在引导行中重复 html 的背景图像答案

【问题标题】：Reapet background image of html in bootstrap row在引导行中重复 html 的背景图像
【发布时间】：2015-11-24 22:38:36
【问题描述】：

我有一个非常简单的 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;
}

现在我正在尝试添加我的引导行并且我的页面都是空白的，因为该行的背景颜色。我可以改成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，但没用

【问题讨论】：

尝试使用background: none;
感谢您的提示，但它仍然是空白的。 :(

标签： html css twitter-bootstrap frontend

【解决方案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，但正文实际上是您想要覆盖的内容。

【讨论】：