"Fixed Background Image"
Bootstrap 3.3.0 Snippet by xkdcc

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="navbar navbar-default navbar-fixed-top navbar-inverse" > <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse"><span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <div class="navbar-collapse collapse navbar-responsive-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#" class="">Active</a> </li> <li><a href="#" class="">Link</a> </li> <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#" class="">Action</a> </li> <li><a href="#" class="">Another action</a> </li> <li><a href="#" class="">Something else here</a> </li> <li class="divider"></li> <li class="dropdown-header">Dropdown header</li> <li><a href="#" class="">Separated link</a> </li> <li><a href="#" class="">One more separated link</a> </li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <form class="navbar-form navbar-left"> <input class="form-control col-lg-8" placeholder="Search" type="text"> </form> <li><a href="#" class="">Link</a> </li> <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#" class="">Action</a> </li> <li><a href="#" class="">Another action</a> </li> <li><a href="#" class="">Something else here</a> </li> <li class="divider"></li> <li><a href="#" class="">Separated link</a> </li> </ul> </li> </ul> </div> </div> <div class="container"> <br> <div class="row-fluid"> <div class="span10 offsetHalf"> <i class="icon-screenshot icon-5x" style="color:#ee1111;"></i> </div> </div> <br><br><br> <div class="row-fluid"> <h1 class="pull-center"><strong>BOOTSTRAP FIXED BACKGROUND</strong></h1> <p class="lead pull-center">A scrolling one page example layout</p> </div> <br><br><br><br> <div class="row-fluid"> <div class="span5 offsetHalf block"> <div class="pull-center"> <h1>Responsive Design</h1> Take a look at what we mixed up in our Bootstrap test labs. Nullam sapien massa, aliquam in cursus ut, ullamcorper in tortor. <br> <h1><i class="icon-beaker icon-4x"></i></h1> <button class="btn btn-primary btn-flat">Go Here<i class="pull-right icon-chevron-right icon-large"></i></button> </div> </div> <div class="span5 block"> <div class="pull-center"> <h1>2013 Trends</h1> With all of the front-end frameworks at hand, why does Bootstrap lead? Aliquam mauris arcu, tristique a, condimentum feugiat justo.<br> <h1><i class="icon-fire icon-4x"></i></h1> <button class="btn btn-primary btn-flat">Go There<i class="pull-right icon-chevron-right icon-large"></i></button> </div> </div> </div> <br><br><br> <div class="row-fluid"> <h3 class="pull-center">Featuring</h3> </div> <br><br> <div class="row-fluid"> <div class="span12"> <div class="span3 block block-sm offsetHalf1"> <h2>Build</h2> Bootply is a playground for Twitter Bootstrap. </div> <div class="span3 block block-sm"> <h2>Design</h2> Use Bootply to design, prototype, extend the Bootstrap framework. </div> <div class="span3 block block-sm"> <h2>Test</h2> Use Bootply to test and debud Bootstrap designs. </div> </div> </div> </div><!---/cont----> <br><br> <h4 class="pull-center">A Mini Carousel</h4> <br><br> <div class="container"> <!-- Slider --> <div class="row-fluid"> <div class="span9 offsetHalf1" id="slider"> <!-- Top part of the slider --> <div class="row-fluid"> <div id="carousel-bounding-box"> <div id="myCarousel" class="carousel slide"> <!-- Carousel items --> <div class="carousel-inner"> <div class="active item" data-slide-number="0"><img class="img-rounded" src="http://lorempixel.com/300/250"></div> <div class="item" data-slide-number="1"><img class="img-rounded" src="http://lorempixel.com/300/250/technics/1"></div> <div class="item" data-slide-number="2"><img class="img-rounded" src="http://lorempixel.com/300/250/business/1"></div> <div class="item" data-slide-number="3"><img class="img-rounded" src="http://lorempixel.com/300/250/city"></div> <div class="item" data-slide-number="4"><img class="img-rounded" src="http://lorempixel.com/300/250/city/1"></div> <div class="item" data-slide-number="5"><img class="img-rounded" src="http://lorempixel.com/300/250"></div> </div> </div> <!-- Carousel nav --> <div class="carousel-controls-mini"> <a href="#myCarousel" data-slide="prev">‹</a> <a href="#myCarousel" data-slide="next">›</a> </div> </div> <div class="span4" id="carousel-text"></div> <div style="display:none;" id="slide-content"> <div id="slide-content-0"> <h5>Slide One</h5> <p>This is mini slider / carousel with Bootstrap. Blah blah, blah, blah blah. Lorem dolor?</p> <small>October 13 2013 - <a href="#">Read more</a></small> </div> <div id="slide-content-1"> <h5>Slide Two</h5> <p>Mini carousel with Bootstrap</p> <small>October 15 2013 - <a href="#">Read more</a></small> </div> <div id="slide-content-2"> <h5>Slider Three</h5> <p>Facebook-style paged image slider</p> <small>October 19 2013 - <a href="#">Read more</a></small> </div> <div id="slide-content-3"> <h5>Slider Four</h5> <p>Lorem Ipsum Dolor</p> <small>October 22 2013 - <a href="#">Read more</a></small> </div> <div id="slide-content-4"> <h5>Slider Five</h5> <p>Lorem Ipsum Dolor</p> <small>October 25 2013 - <a href="#">Read more</a></small> </div> <div id="slide-content-5"> <h5>Slider Six</h5> <p>Lorem Ipsum Dolor</p> <p class="sub-text">October 24 2012 - <a href="#">Read more</a></p> </div> </div> </div> </div> </div> <!--/Slider--> <br> <br> <br> <div class="row-fluid hidden-phone" id="slider-thumbs"> <div class="span12"> <!-- Bottom switcher of slider --> <ul class="thumbnails"> <li class="span2"> <a class="thumbnail" id="carousel-selector-0"> <img src="http://placehold.it/170x100&text=one"> </a> </li> <li class="span2"> <a class="thumbnail" id="carousel-selector-1"> <img src="http://placehold.it/170x100&text=two"> </a> </li> <li class="span2"> <a class="thumbnail" id="carousel-selector-2"> <img src="http://placehold.it/170x100&text=three"> </a> </li> <li class="span2"> <a class="thumbnail" id="carousel-selector-3"> <img src="http://placehold.it/170x100&text=four"> </a> </li> <li class="span2"> <a class="thumbnail" id="carousel-selector-4"> <img src="http://placehold.it/170x100&text=five"> </a> </li> <li class="span2"> <a class="thumbnail" id="carousel-selector-5"> <img src="http://placehold.it/170x100&text=six"> </a> </li> </ul> </div> </div> <br><br> <div class="row-fluid"> <a href="#" title="Bootstrap playground">Play with this on Bootply</a> <div class="pull-right"> <a href="#"><i class="icon-facebook icon-3x"></i> </a>   <a href="#"><i class="icon-twitter icon-3x"></i></a>   <a href="#"><i class="icon-pinterest icon-3x"></i></a> </div> </div> <br><br> </div>
@import url('http://fonts.googleapis.com/css?family=Open+Sans:200,300'); body { background: url('http://s.bootply.com/assets/64531/green_suburb.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; color:#fff; background-color:#333; font-family: 'Open Sans',Arial,Helvetica,Sans-Serif; } a:link, a:visited { color:#eee; } .block { background-color:rgba(0,0,0,0.2); height:370px; padding-left:12px; padding-right:12px; } .block-sm { height:180px; } .btn-flat { font-family: 'Open Sans',Arial,Helvetica,Sans-Serif; border-radius:0px; border-width:0; background-image:none; padding:16px; margin:0 auto; margin-top:15px; width:70%; font-size:20pt; } /* mini carousel */ .carousel-inner img { width:100%; height:100%; } #myCarousel { font-size:90%; } .carousel-controls-mini { margin-left:42%; } .carousel-controls-mini > a { border:1px solid #eee; margin:1px; width:20px; display:block; float:left; text-align:center; } #carousel-bounding-box { margin:0 auto; width:300px; }

Related: See More


Questions / Comments: