Загрузочное фоновое изображение не заполняет веб-окно

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

экран браузера представлен тегом «тела», и это, как вы стиль тело/экран.