引导行中的html的背景图像

Question

I have a very simple page in HTML and I added a background image using the code that I found 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;
}

Now I'm trying to add my bootstrap rows and my page is all blank, because the background colour of the row. I can change it with background-color , but I can't make it repeat the background image.

This is my 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>

How can I set it with the the same background image? I tried background-color:transparent , but it didn't work

Answer 1

I managed to fix this by changing the CSS to

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 .

This is happening because you only had HTML listed in the selector, however the body is actually what you're wanting to cover.