2015-06-09 78 views
0

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>

+0

它顯示在頁腳 –

回答

1

JS Fiddle

將背景樣式添加到body。身體會超過HTML,並且身體的默認顏色是白色,您的圖像將不會顯示在身體中。

[編輯#1]

更好的解決辦法是繼續html背景樣式,並添加background: none;身體。這樣,整個屏幕將被覆蓋,內容將滾動而不是圖像加上,圖像不會重複。就頁腳間距而言,我建議你清理你的代碼。那會好的。你可能寫了一些無效的HTML。

備註:運行JSFiddle來測試它是否工作。不要每次按保存。你像8615次更新你的小提琴。

+0

謝謝很多,另一個問題,你可以看到我的頁腳(底部)有空間線我怎麼能刪除該空間 –

+0

@ChathurangaEdirisingha看到我編輯的答案。 –