Bootstrap背景图片不会填满网页窗口

Question

出于某种原因，背景图片位于登录面板的限制范围内，我不知道原因。我希望图像是浏览器窗口的全宽和高度。任何帮助将不胜感激。

<?php include("includes/header.php") ?>

<?php include("login/RegisterBG.php") ?>


<?php 

if(logged_in()) {

    redirect("admin.php");

}



?>





<?php include("includes/nav.php") ?>
<style>

    #topContainer {
        background-image: url(css/images/BG-main.png);

        width: 100%;
        background-size: cover;                    
        background-position: center;                   
        background-attachment: fixed;                       
    }

</style>





<div class="row">
    <div class="col-lg-6 col-lg-offset-3">

        <?php display_message(); ?>

        <?php validate_user_login(); ?>

    </div>
</div>

<div class="container contentContainer" id="topContainer">
    <div class="row">
            <h2 class="marginTop">Intro text intro text intro text.</h2>

    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <div class="panel panel-login">
                <div class="panel-heading">
                    <div class="row">
                        <div class="col-xs-6">
                            <a href="login.php" class="active" id="login-form-link">Login</a>
                        </div>
                        <div class="col-xs-6">
                            <a href="register.php" id="">Register</a>
                        </div>
                    </div>
                    <hr>
                </div>

                <div class="panel-body">
                    <div class="row">
                        <div class="col-lg-12">
                            <form id="login-form"  method="post" role="form" style="display: block;">
                                <div class="form-group">
                                    <input type="text" name="email" id="email" tabindex="1" class="form-control" placeholder="Email" required>
                                </div>
                                <div class="form-group">
                                    <input type="password" name="password" id="login-
                                    password" tabindex="2" class="form-control" placeholder="Password" required>
                                </div>
                                <div class="form-group text-center">
                                    <input type="checkbox" tabindex="3" class="" name="remember" id="remember">
                                    <label for="remember"> Remember Me</label>
                                </div>
                                <div class="form-group">
                                    <div class="row">


                                        <div class="col-sm-6 col-sm-offset-3">
                                            <input type="submit" name="login-submit" id="login-submit" tabindex="4" class="form-control btn btn-login" value="Log In">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <div class="text-center">
                                                <a href="recover.php" tabindex="5" class="forgot-password">Forgot Password?</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>

                        </div>
                    </div>
                </div>
            </div>
        </div>

          </div>

</div>


</div>

这是截图，看看我的意思。

Answer 1

将#topContainer更改为

 body, #topContainer {
    background-image: url(css/images/BG-main.png);
    width: 100%;
    background-size: cover;                    
    background-position: center;                   
    background-attachment: fixed;                       
}

浏览器屏幕由“body”标签表示，这就是您为正文/屏幕设置样式的方式。