背景圖片無法響應

我的背景圖片無法響應，我在我的其他頁面上嘗試此代碼，但它工作正常，但是當我應用此代碼時。如果我最小化屏幕，背景將不會以全屏顯示。這裏的html的背景圖片無法響應

<!DOCTYPE html> 
<html> 

<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<link rel="stylesheet" href="assets/css/bootstrap.min.css"> 
<link rel="stylesheet" href="https://fonts.googleapis.com/css? 
family=Cookie"> 
<link rel="stylesheet" href="assets/fonts/font-awesome.min.css"> 
<link rel="stylesheet" href="assets/fonts/material-icons.css"> 
<link rel="stylesheet" href="css/landing-page.css"> 

</head> 

<body> 
<!-- Navigation Bar --> 
<nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 
     <div class="navbar-header"><a class="navbar-brand navbar-link" 
href="#"><strong>Hello</strong>'s Builder</a> 
      <button class="navbar-toggle collapsed" data-toggle="collapse" 
data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span 
class="icon-bar"></span><span class="icon-bar"></span><span class="icon- 
bar"></span></button> 
     </div> 
     <div class="collapse navbar-collapse" id="navcol-1"> 

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

<!-- End of Navigation --> 

<div class="intro-header"> 
    <div class="container"> 

     <div class="row"> 
      <div class="col-lg-12"> 
       <div class="intro-message"> 
        <h2>Build Your Website</h2> 
        <hr class="intro-divider"> 
        <ul class="list-inline intro-social-buttons"> 
         <li> 
          <a href="grapesjs/grapesjs.php" class="btn btn-default btn-lg">Get Started</a> 
         </li> 
        </ul> 
       </div> 
      </div> 
     </div> 

    </div> 
    <!-- /.container --> 

</div> 
<!-- /.intro-header --> 
<script src="assets/js/jquery.min.js"></script> 
<script src="assets/bootstrap/js/bootstrap.min.js"></script>

，這裏是我的CSS：

body, 
html { 
width: 100%; 
height: 100%; 
} 

body, 
h1, 
h2, 
h3, 
h4, 
    h5, 
h6 { 
    font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif; 
    font-weight: 700; 
    } 

/* NAVIGATION BAR */ 
nav.navbar.navbar-inverse{ 
border-radius:0px; 
} 

.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > 
    .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus{ 
background-color:#dbe1f4; 
} 

.navbar-brand{ 
transform:translateX(-50%); 
left:50%; 
position:absolute; 
} 

/* INTRO */ 
.intro-header { 
padding-top: 50px; 
padding-bottom: 50px; 
text-align: center; 
color: #f8f8f8; 
background: url(../image/intro-bg.jpg); 
background-repeat:no-repeat; 
-webkit-background-size:cover; 
-moz-background-size:cover; 
-o-background-size:cover; 
background-size:cover; 
background-position:center center; 
background-attachment: fixed; 
} 

.intro-message { 
position: relative; 
padding-top: 20%; 
padding-bottom: 20%; 
} 

.intro-message > h1 { 
margin: 0; 
text-shadow: 2px 2px 3px rgba(0,0,0,0.6); 
font-size: 5em; 
} 

.intro-divider { 
width: 400px; 
border-top: 1px solid #f8f8f8; 
border-bottom: 1px solid rgba(0,0,0,0.2); 
} 

.intro-message > h3 { 
text-shadow: 2px 2px 3px rgba(0,0,0,0.6); 
} 

@media(max-width:500px) { 
.intro-header{ 
    background-size:cover; 
    min-width: 500px; 
    background-position:center center; 
    background-attachment: fixed; 

} 
.intro-message { 
    padding-bottom: 15%; 
} 

.intro-message > h1 { 
    font-size: 3em; 
} 

ul.intro-social-buttons > li { 
    display: block; 
    margin-bottom: 20px; 
    padding: 0; 
} 

ul.intro-social-buttons > li:last-child { 
    margin-bottom: 0; 
} 

.intro-divider { 
    width: 100%; 
} 
}

總是有它下面的空白。我不知道什麼是錯導致它與我的其他背景

來源

2017-07-26 Clarisa Valentin

爲什麼不是一直使用'background-size：cover'？ – lumio

我做起初，但沒有改變任何東西，所以我搜查並把所有其他的東西，但仍然沒有改變 –

剛更新的答案。 –

更新2的工作：刪除最小寬度線和更新，包括最大寬度和背景大小：包含，就像這樣：

@media (max-width: 500px) { 
.intro-header { 
max-width: 500px; 
background-size:contain; 
} 
}

來源

2017-07-26 15:04:56

沒有什麼變化，我認爲問題是與高度 –

嗨Clarisa - 你可以添加完整的HTML和CSS？這將幫助我們調試。 –

奧克我已經編輯它 –

背景圖片無法響應

回答

相關問題