Question

我的背景图片无法响应，我在我的其他页面上尝试此代码并且它工作但是当我应用此代码时。如果我最小化屏幕，背景将不会全屏显示。这是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%;
}
}

下面总是有空白区域。我不知道什么是错的，因为它适用于我的其他背景

Answer 1

更新2：删除最小宽度线并更新为包括max-width和background-size：contains，如下所示：

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

背景图像无法响应

1 个答案: