<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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="carousel fade-carousel slide" data-ride="carousel" data-interval="4000" id="bs-carousel"> <!-- Overlay --> <div class="overlay"></div> <ol > <li data-target="#bs-carousel" data-slide-to="0" ></li> </ol> <div class="carousel-inner"> <div class="item slides active"> <div class="banner"></div> <div class="hero"> <hgroup> <h1>India's Largest Talent Community</h1> <h3>is an online talent platform where users can showcase heir skills and compete to win fame and fortune </h3> </hgroup> <button class="btn btn-primary" role="button">Learn More</button> <button class="btn btn-default" role="button">Explore</button> </div> </div> </div> </div> </div>

/* */ .fade-carousel { position: relative; height: 100vh; } .hero { position: absolute; top: 50%; left: 50%; z-index: 3; color: #fff; text-align: center; text-shadow: 1px 1px 0 rgba(0,0,0,.75); -webkit-transform: translate3d(-50%,-50%,0); -moz-transform: translate3d(-50%,-50%,0); -ms-transform: translate3d(-50%,-50%,0); -o-transform: translate3d(-50%,-50%,0); transform: translate3d(-50%,-50%,0); } .overlay { position: absolute; width: 100%; height: 100%; z-index: 1; opacity: .7; } .fade-carousel .slides .banner { height: 100vh; background-size: cover; background-position: center center; background-repeat: no-repeat; } .fade-carousel .slides .banner { background-image: url(https://ununsplash.imgix.net/photo-1416339134316-0e91dc9ded92?q=75&fm=jpg&s=883a422e10fc4149893984019f63c818); } @media screen and (min-width: 980px){ .hero { width: 980px; } } @media screen and (max-width: 640px){ .hero h1 { font-size: 2em; } }