html - CSS 背景不工作(使用 Bootstrap)

Question

我是编码/开发网站的新手，我在处理这个元素时遇到了问题。无论我做什么，我都无法通过 CSS 获取背景来显示。有人可以看看我的代码，看看我做错了什么吗？谢谢。

http://jsfiddle.net/bkeu8nrf/

<div class="container">

    <header class="row"> <!-- Row 1 -->

        <div class="col-md-12" id="logo">

            <a href="#"><img class="center-block" src="images/logo.jpg" alt=""></a>

        </div>

    </header> <!-- /Row 1 -->

    <nav class="navbar navbar-default navbar-inverse"> <!-- Navbar -->

        <div class="container-fluid">

            <div class="navbar-header">

                <button type="button" class="navbar-toggle collapse" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">

                    <span class="sr-only">Toggle Navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>

                </button>

                <a href="#" class="navbar-brand"></a> <!-- Brand -->

                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <!-- Links -->

                    <ul class="nav navbar-nav">

                        <li class="active"><a href="#">Home<span class="sr-only">(Current)</span></a></li>

                        <li><a href="#">Nosotros</a></li>

                        <li class="dropdown"> <!-- Dropdown -->

                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                            aria-expanded="false">Ministerios<span class="caret"></span></a>

                            <ul class="dropdown-menu" role="menu">

                                <li><a href="#">Ministerio 1</a></li>
                                <li><a href="#">Ministerio 2</a></li>
                                <li><a href="#">Ministerio 3</a></li>
                                <li><a href="#">Ministerio 4</a></li>
                                <li><a href="#">Ministerio 5</a></li>

                            </ul>

                        </li> <!-- /Dropdown -->

                        <li><a href="#">Servicios</a></li>

                        <li><a href="#">Miembros</a></li>

                        <li><a href="#">Contacto</a></li>

                    </ul>

                </div> <!-- /Navbar Collapse -->

            </div> <!-- /Navbar Header -->

        </div> <!-- /Container-fluid -->


    </nav> <!-- /Navbar -->

    <div id="the-slider" class="carousel slide center-block" data-ride="carousel"> <!-- Carousel -->
        <ol class="carousel-indicators">
            <li data-target="#the-slider" data-slide-to="0" class="active"></li>
            <li data-target="#the-slider" data-slide-to="1"></li>
            <li data-target="#the-slider" data-slide-to="2"></li>
        </ol>

        <div class="carousel-inner"> <!-- Carousel Inner -->

            <div class="item active">

                <img src="images/banner1.jpg" alt="" class="img-responsive">

            </div>

            <div class="item">

                <img src="images/banner2.jpg" alt="" class="img-responsive">

            </div>

            <div class="item">

                <img src="images/banner3.jpg" alt="" class="img-responsive">

            </div>

        </div>  <!-- /Carousel Inner -->

        <!-- Carousel Controls -->
        <a class="left carousel-control" href="#the-slider" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>


        <a class="right carousel-control" href="#the-slider" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a> 

        <!-- /Carousel Controls -->


    </div> <!-- /Carousel -->

    <div class="row" id="row2"> <!-- Row 2 -->

        <div class="col-md-6 well" id="secondarybanner">

            <img src="http://placehold.it/560x300" alt="">

        </div>

        <div class="col-md-6">

            <div> <!-- Twitter Widget -->

                <a class="twitter-timeline" href="https://twitter.com/IglCristiana" data-widget-id="404001509135753216">Tweets by @IglCristiana</a>

                <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
            </div> <!-- /Twitter Widget -->

            <div>

                <img src="http://placehold.it/60x60" alt="">
                <img src="http://placehold.it/60x60" alt="">
                <img src="http://placehold.it/60x60" alt="">

            </div>

        </div>


    </div> <!-- /Row 2 -->

    <div class="row" id="row3"> <!-- Row 3 -->

        <div class="col-md-3 well" id="images"> 
            <img src="http://placehold.it/270x270" alt="">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            </p>

        </div>
        <div class="col-md-3 well" id="images"> <img src="http://placehold.it/270x270" alt=""> </div>
        <div class="col-md-3 well" id="images"> <img src="http://placehold.it/270x270" alt=""> </div>
        <div class="col-md-3 well" id="images"> <img src="http://placehold.it/270x270" alt=""> </div>


    </div> <!-- /Row 3 -->

    <footer class="row"> <!-- Row 4 -->

        <div class="pull-right" id="footer">

            <a href="#">Contacto</a>
            <a id="row4" href="#">Contacto</a>
            <a id="row4" href="#">Contacto</a>

        </div>

        <div class="pull-left" id="footer">
            <p>Copyright 2015</p>
        </div>

        <div class="text-center" id="footerlower">
            <p>Iglesia Cristiana 2015</p>
        </div>

    </footer> <!-- /Row 4 -->


</div> <!-- /Container -->

<!-- javascript -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/bootstrap.min.js"></script>

Answer 1

设置.fullbg类别为 <body> , 从 <html> 中删除它标签

CSS

body.fullbg {
    background: url('../images/bg2.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

DEMO HERE