фон Bootstrap изображение не отображается

Question

I am trying to put back ground image for my bootstrap web page but that is not show Please refer this link and see my progress work

Я пытаюсь поставить обратно землю изображение, но в бутстраповской формате он не отображается в обычном формате, это отображение того, что проблема, пожалуйста, помогите мне

/* Sticky footer styles 
 
-------------------------------------------------- */ 
 
html{ 
 
    /* This image will be displayed fullscreen */ 
 
    background-image:url('http://p1.pichost.me/i/72/1968716.jpg'); 
 

 
    /* Ensure the html element always takes up the full height of the browser window */ 
 
    min-height:100%; 
 

 
    /* The Magic */ 
 
    background-size:cover; 
 
} 
 

 
body{ 
 
    /* Workaround for some mobile browsers */ 
 
    min-height:100%; 
 
} 
 

 
/* Wrapper for page content to push down footer */ 
 
#wrap { 
 
    min-height: 100%; 
 
    height: auto !important; 
 
    height: 100%; 
 
    /* Negative indent footer by its height */ 
 
    margin: 0 auto -120px; 
 
    /* Pad bottom by footer height */ 
 
    padding: 0 0 120px; 
 
} 
 

 
/* Set the fixed height of the footer here */ 
 
#footer { 
 
    height: 60px; 
 
    background-color: #f5f5f5; 
 
    margin-top:50px; 
 
    padding-top:20px; 
 
    padding-bottom:20px; 
 
} 
 

 

 
/* Custom page CSS 
 
-------------------------------------------------- */ 
 
/* Not required for template or sticky footer method. */ 
 

 

 
.panel-transparent { 
 
     background: none; 
 
    } 
 

 
    .panel-transparent .panel-body{ 
 
     background: rgba(245, 245, 245, 0.2)!important; 
 
    } 
 

 
#wrap > .container { 
 
    padding: 60px 15px 0; 
 
} 
 
.container .credit { 
 
    margin: 20px 0; 
 
} 
 

 
#footer > .container { 
 
    padding-top: 20px; 
 
    padding-left: 15px; 
 
    padding-right: 15px; 
 
} 
 

 
#footer { 
 
    background-color:#414141; 
 
} 
 

 

 
code { 
 
    font-size: 80%; 
 
}

<!-- Wrap all page content here --> 
 
<div id="wrap"> 
 
    
 
    <!-- Fixed navbar --> 
 
<nav class="navbar navbar-inverse"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span>       
 
     </button> 
 
     <a class="navbar-brand" href="#">WebSiteName</a> 
 
    </div> 
 
    <div class="collapse navbar-collapse" id="myNavbar"> 
 
     
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li onclick="view()"><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> 
 
     <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav> 
 
    
 
    <!-- Begin page content --> 
 
    <div class="container"> 
 
    <div class="panel panel-primary panel-transparent" id="login"> 
 
     <div class="panel-heading">User Login</div> 
 
     <div class="panel-body"> 
 
    <div class="jumbotron"> 
 
     <form class="form-horizontal" role="form"> 
 
    <div class="form-group"> 
 
    <label class="control-label col-sm-2" for="email">Email:</label> 
 
    <div class="col-sm-10"> 
 
     <input class="form-control" id="email" placeholder="Enter email" type="email"> 
 
    </div> 
 
    </div> 
 
    <div class="form-group"> 
 
    <label class="control-label col-sm-2" for="pwd">Password:</label> 
 
    <div class="col-sm-10"> 
 
     <input class="form-control" id="pwd" placeholder="Enter password" type="password"> 
 
    </div> 
 
    </div> 
 
    <div class="form-group"> 
 
    <div class="col-sm-offset-2 col-sm-10"> 
 
     <div class="checkbox"> 
 
     <label><input type="checkbox"> Remember me</label> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="form-group"> 
 
    <div class="col-sm-offset-2 col-sm-10"> 
 
     <button type="submit" class="btn btn-default">Submit</button> 
 
    </div> 
 
    </div> 
 
</form> 
 
     
 
     
 
     </div> 
 
    </div> 
 
    </div> 
 
    
 
    
 
    </div> 
 
</div> 
 

 
<div id="footer"> 
 
    <div class="container"> 
 
     \t <div class="row"> 
 
      <p class="text-muted">This Bootstrap Example courtesy <a href="http://www.bootply.com">Bootply.com</a></p> 
 
\t \t </div><!--/row--> 
 
    
 
    </div><!--/container--> 
 
</div>

Answer 1

JS Fiddle

Добавить стили фона в body. Тело появится над HTML, а цвет по умолчанию для тела белый, ваше изображение не будет отображаться в теле.

[Отредактировано # 1]

лучшим решением было бы держать стили фона на html и добавить background: none; к телу. Таким образом, весь экран будет покрыт, а контент будет прокручиваться, а не изображение плюс, изображение не будет повторяться. Что касается интервала между колонтитулами, я бы предложил вам очистить свой код. Тогда это будет хорошо. Возможно, вы написали недействительный HTML.

Замечание: Запустите JSFiddle, чтобы проверить, работает ли он. Не нажимайте Save каждый раз. Вы обновили свою скрипку, как 8615 раз.