<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="container fill"> <div id="myCarousel" class="carousel slide"> <div class="carousel-inner"> <div class="active item"> <div class="fill" style="background-image:url('https://static.pexels.com/photos/2324/skyline-buildings-new-york-skyscrapers.jpg');"> <div class="container"> fsfsfsfsfdsfdsf </div> </div> </div> </div> </div>

html,body{height:100%;} .carousel,.item,.active{height:100%;} .carousel-inner{height:80%;} .fill{ width:100%;height:100%;background-position:center;background-size:cover;} /* faster sliding speed */ .carousel-inner > .item { -webkit-transition: 0.3s ease-in-out left; -moz-transition: 0.3s ease-in-out left; -o-transition: 0.3s ease-in-out left; transition: 0.3s ease-in-out left; } .fill .container { background-color: rgba(46, 84, 225, 0.3); width:100%; left: 0; right: 0; height:100%; overflow:hidden; position:absolute; -webkit-box-shadow: inset -8px -200px 166px -40px rgba(255,255,255,1); -moz-box-shadow: inset -8px -200px 166px -40px rgba(255,255,255,1); box-shadow: inset -8px -200px 166px -40px rgba(255,255,255,1); } /* keep full widget on smaller screens */ @media (max-width: 767px) { body { padding-left: 0; padding-right: 0; } }

$(function() { $('.carousel').carousel(); });