Question

我正在尝试让我的#home背景图片具有响应性，所以当我调整浏览器大小或通过手机查看时，它应该是响应的，请告诉我该怎么做？正如您在我调整浏览器大小时所看到的那样，背景图像不会覆盖整个浏览器。并且在右侧有白色空间，这意味着背景图像不会伸展以覆盖整个部分我希望你明白。

这是我的代码

HTML：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Jumbotron Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="assets/css/jumbotron.css" rel="stylesheet">

    <!-- Style Sheet -->
<link href="assets/css/style.css" rel="stylesheet">
    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="../../assets/js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

    <div class="navbar-wrapper">
                <div class="navbar navbar-inverse navbar-fixed-top" id="main-navbar" role="navigation">  
                    <div class="container">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false" aria-controls="navbar" >
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                            <a class="navbar-brand" href="/"></a>
                        </div><!--navbar-header-->
                            <div class="navbar-collapse collapse">
                                <ul class="nav navbar-nav navbar-right">
                                    <li class="active"><a href="/">Home</a></li>
                                    <li><a href="#about-me">About Me</a></li>
                                    <li><a href="#skills">Skills</a></li>
                                    <li><a href="#portfolio">Portfolio</a></li>
                                    <li><a href="#kudos">Testimonials</a></li>
                                    <li><a href="#contact">Contact</a></li>
                                </ul>
                            </div><!--navbar-collapse-->
                    </div><!--container-->
                </div><!--navbar-->
            </div><!--navbar-wrapper -->

            <!-- Home -->
            <section id="home">
            <div class="col-sm-7 hero-text">
                            <h1>I'm <span>Ali</span></h1>
                            <p class="subtitle">Front End Developer | Web Designer | SEO Specialist</p>


  <ul id="social-icons">
    <li><a href="/"><i class="fa fa-facebook fa-2x"></i></a></li>
    <li><a href=""><i class="fa fa-twitter fa-2x"></i></a></li>
    <li><a href=""><i class="fa fa-google-plus fa-2x"></i></a></li>
  </ul>


</div>

</section>



      <footer>
        <p>&copy; Muhammad Ali</p>
      </footer>
    </div> <!-- /container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.11.3/jquery.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>

  </body>

和CSS

@import url("https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");

/*Header*/
body    {
    margin-top: 50px;
    font-family: 'proxima-nova', 'Raleway', Helevetica, sans-serif;
    font-size: 16px;
    background: url('../img/tile.jpg') top left repeat;
}
#home {


    background: url('http://cookusart.com/images/2/images-background/images-background-02.jpg') 50% 0 repeat fixed;
    min-height: 500px;
    padding: 40px 0;


}
.hero-text {
    text-transform: uppercase;
}
.hero-text h1{
position: relative;
top: 20px;
}
.hero-text h1 span {
color: #FBB829;

}

.subtitle {
    padding: 15px 25px;
     border: 2px solid black;
    text-transform: uppercase;
    font-size: 18px;
    color: black;
    font-weight: 250;
    letter-spacing: 0.3em;
  margin-right: 25px;
  display:inline-block;
  position:relative;
left:600px;
top: 20px;
 transform: translateX(-50%);

  }

感谢您的帮助

Answer 1

您可以使用background-size：cover css属性。所以它会像你这样继续你的#home选择器。

#home {


    background: url('http://cookusart.com/images/2/images-background/images-background-02.jpg') no-repeat center center fixed;
    background-size: cover;
    min-height: 500px;
    padding: 40px 0;


}

请参阅此参考资料https://css-tricks.com/perfect-full-page-background-image/

Answer 2

试试这个：

#home {
    min-height: 500px;
    padding: 40px 0;
    background-image: url("http://cookusart.com/images/2/images-background/images-background-02.jpg");
    background-repeat: no-repeat;
    background-position: center center;      /* center the image */
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
     background-size: cover;
}

背景图像响应

2 个答案: