<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 id="background-carousel"> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="item active" style="background-image:url(https://i.pinimg.com/originals/eb/3c/3a/eb3c3a0e4bd0fa4d648be6405a528d0f.jpg)"></div> <div class="item" style="background-image:url(http://hawastsoc.org/deepsky/images/vul/cr399.jpg)"></div> <div class="item" style="background-image:url(https://pre00.deviantart.net/100b/th/pre/i/2016/173/3/a/fox_constellation_by_picolo_kun-da77e68.jpg)"></div> </div> </div> </div> <div id="content-wrapper"> <!-- PAGE CONTENT --> <div class="container"> <div class="page-header"><h3>It'll blow your MIND.</h3></div> <div class="well"> <p> Your mother was a knob-gobblin. <!--<br><a href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank" class="label label-danger">Bootstrap 3 - Carousel Collection</a>--> </p> </div><!-- End Well --> </div><!-- End Container --> <!-- PAGE CONTENT --> </div>

html,body { height:100%; width:100%; position:relative; } h3 { color: #FFF; } #background-carousel{ position:fixed; width:100%; height:100%; z-index:-1; } .carousel, .carousel-inner { width:100%; height:100%; z-index:0; overflow:hidden; } .item { width:100%; height:100%; background-position:center center; background-size:cover; z-index:0; } #content-wrapper { position:absolute; z-index:1 !important; min-width:100%; min-height:100%; } .well { opacity:0.85 }

$('#myCarousel').carousel({ pause: 'none' })