html – 如何使用bootstrap使用bakcground图像制作div fullScreen_html-js-css

概述我想创建一个页面,我可以使用bootstrap创建一个带有背景图像的div全屏,就像 Endomodo’s site一样因为我刚刚开始使用boost,我在startboostrap website下载了一些样品,并试图管理我想要的东西.我的问题是菜单和内容显示在页面中,但我的div没有(以及图像). 我的html / css： body { margin-top: 50px; /* Re 我想创建一个页面,我可以使用bootstrap创建一个带有背景图像的div全屏,就像 Endomodo’s site一样

因为我刚刚开始使用boost,我在startboostrap website下载了一些样品,并试图管理我想要的东西.我的问题是菜单和内容显示在页面中,但我的div没有(以及图像).
我的HTML / CSS：

body {    margin-top: 50px; /* required margin for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */}/* header Image Background - Change the URL below to your image path (example: ../images/background.jpg) */.full {    background: url(bg3.jpg) no-repeat center center fixed;    -webkit-background-size: cover;    -moz-background-size: cover;    background-size: cover;    -o-background-size: cover;}.header-image {    display: block;    wIDth: 100%;    text-align: center;    background: url('http://placehold.it/1900x500') no-repeat center center scroll;    -webkit-background-size: cover;    -moz-background-size: cover;    background-size: cover;    -o-background-size: cover;}.headline {    padding: 120px 0;}.headline h1 {    Font-size: 130px;    background: #fff;    background: rgba(255,255,0.9);}.headline h2 {    Font-size: 77px;    background: #fff;    background: rgba(255,0.9);}.featurette-divIDer {    margin: 80px 0;}.featurette {    overflow: hIDden;}.featurette-image.pull-left {    margin-right: 40px;}.featurette-image.pull-right {    margin-left: 40px;}.featurette-heading {    Font-size: 50px;}footer {    margin: 50px 0;}@media(max-wIDth:1200px) {    .headline h1 {        Font-size: 140px;    }    .headline h2 {        Font-size: 63px;    }    .featurette-divIDer {        margin: 50px 0;    }    .featurette-image.pull-left {        margin-right: 20px;    }    .featurette-image.pull-right {        margin-left: 20px;    }    .featurette-heading {        Font-size: 35px;    }}@media(max-wIDth:991px) {    .headline h1 {        Font-size: 105px;    }    .headline h2 {        Font-size: 50px;    }    .featurette-divIDer {        margin: 40px 0;    }    .featurette-image {        max-wIDth: 50%;    }    .featurette-image.pull-left {        margin-right: 10px;    }    .featurette-image.pull-right {        margin-left: 10px;    }    .featurette-heading {        Font-size: 30px;    }}@media(max-wIDth:768px) {    .container {        margin: 0 15px;    }    .featurette-divIDer {        margin: 40px 0;    }    .featurette-heading {        Font-size: 25px;    }}@media(max-wIDth:668px) {    .headline h1 {        Font-size: 70px;    }    .headline h2 {        Font-size: 32px;    }    .featurette-divIDer {        margin: 30px 0;    }}@media(max-wIDth:640px) {    .headline {        padding: 75px 0 25px 0;    }    .headline h1 {        Font-size: 60px;    }    .headline h2 {        Font-size: 30px;    }}@media(max-wIDth:375px) {    .featurette-divIDer {        margin: 10px 0;    }    .featurette-image {        max-wIDth: 100%;    }    .featurette-image.pull-left {        margin-right: 0;        margin-bottom: 10px;    }    .featurette-image.pull-right {        margin-bottom: 10px;        margin-left: 0;    }}

<!DOCTYPE HTML><HTML lang="en"><!-- Make sure the <HTML> tag is set to the .full CSS class. Change the background image in the full.CSS file. --><head>    <Meta charset="utf-8">    <Meta http-equiv="X-UA-Compatible" content="IE=edge">    <Meta name="vIEwport" content="wIDth=device-wIDth,initial-scale=1">    <Meta name="description" content="">    <Meta name="author" content="">    <Title>Full - Start bootstrap Template</Title>    <!-- Latest compiled and minifIEd CSS --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/CSS/bootstrap.min.CSS" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWpgmkzs7" crossorigin="anonymous">    <!-- bootstrap Core CSS -->    <link href="CSS/bootstrap.min.CSS" rel="stylesheet">    <!-- Custom CSS -->    <link href="CSS/full.CSS" rel="stylesheet">    <!-- HTML5 Shim and Respond.Js ie8 support of HTML5 elements and media querIEs -->    <!-- WARNING: Respond.Js doesn't work if you vIEw the page via file:// -->    <!--[if lt IE 9]>        <script src="https://oss.maxcdn.com/libs/HTML5shiv/3.7.0/HTML5shiv.Js"></script>        <script src="https://oss.maxcdn.com/libs/respond.Js/1.4.2/respond.min.Js"></script>    <![endif]--></head><body>    <!-- Navigation -->    <nav  role="navigation">        <div >            <!-- Brand and toggle get grouped for better mobile display -->            <div >                <button type="button"  data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">                    <span >Toggle navigation</span>                    <span ></span>                    <span ></span>                    <span ></span>                </button>                <a  href="#">Start bootstrap</a>            </div>            <!-- Collect the nav links,forms,and other content for toggling -->            <div  ID="bs-example-navbar-collapse-1">                <ul >                    <li>                        <a href="#">About</a>                    </li>                    <li>                        <a href="#">Services</a>                    </li>                    <li>                        <a href="#">Contact</a>                    </li>                </ul>            </div>            <!-- /.navbar-collapse -->        </div>        <!-- /.container -->    </nav>    <div >    </div>    <!-- Page Content -->    <div >        <hr >        <!-- First Featurette -->        <div  ID="about">            <img  src="http://placehold.it/500x500">            <h2 >This First heading                <span >Will Catch Your Eye</span>            </h2>            <p >Donec ullamcorper nulla non metus auctor fringilla. Vestibulum ID ligula porta felis euismod semper. Praesent commodo cursus magna,vel scelerisque nisl consectetur. Fusce dAPIbus,tellus ac cursus commodo.</p>        </div>        <hr >        <!-- Second Featurette -->        <div  ID="services">            <img  src="http://placehold.it/500x500">            <h2 >The Second heading                <span >Is Pretty Cool Too.</span>            </h2>            <p >Donec ullamcorper nulla non metus auctor fringilla. Vestibulum ID ligula porta felis euismod semper. Praesent commodo cursus magna,tellus ac cursus commodo.</p>        </div>        <hr >        <!-- Third Featurette -->        <div  ID="contact">            <img  src="http://placehold.it/500x500">            <h2 >The Third heading                <span >Will Seal the Deal.</span>            </h2>            <p >Donec ullamcorper nulla non metus auctor fringilla. Vestibulum ID ligula porta felis euismod semper. Praesent commodo cursus magna,tellus ac cursus commodo.</p>        </div>        <hr >        <!-- Footer -->        <footer>            <div >                <div >                    <p>copyright &copy; Your Website 2014</p>                </div>            </div>        </footer>    </div>    <!-- /.container -->    <!-- jquery -->    <script src="Js/jquery.Js"></script>    <!-- bootstrap Core JavaScript -->    <script src="Js/bootstrap.min.Js"></script></body></HTML>

解决方法为了在bootstrap中创建div完整大小,您需要使用container-fluID类.您可以使用以下代码获取整页宽度响应图像div.