<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/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"> <div class="row"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="carousel-inner"> <div class="col-sm-10 col-sm-offset-1 on-top-of-carousel"> TEXT ON TOP OF CAROUSEL </div> <div class="item active" style="background-image: url('http://upload.wikimedia.org/wikipedia/commons/8/8e/Templo_Wat_Arun%2C_Bangkok%2C_Tailandia%2C_2013-08-22%2C_DD_37.jpg')"> </div> <div class="item" style="background-image: url('http://upload.wikimedia.org/wikipedia/commons/a/a5/%D0%93%D0%BE%D1%81%D1%83%D0%B4%D0%B0%D1%80%D1%81%D1%82%D0%B2%D0%B5%D0%BD%D0%BD%D1%8B%D0%B9_%D0%B8%D1%81%D1%82%D0%BE%D1%80%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B9_%D0%BC%D1%83%D0%B7%D0%B5%D0%B9_%E2%84%962.JPG')"> </div> <div class="item" style="background-image: url('http://upload.wikimedia.org/wikipedia/commons/c/ce/Unterzeichnung_des_Koalitionsvertrages_der_18._Wahlperiode_des_Bundestages_%28Martin_Rulsch%29_026.jpg')"> </div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> </div> </div>

#carousel-example-generic {height:500px; width:100%;} .carousel,.item,.active{height:100%;} .carousel-inner{height:100%;} .item{width:100%;height:100%;background-position:center;background-size:cover;} .on-top-of-carousel {z-index:999; position:absolute; color:#fff; background-color:#3498DB; padding:50px; margin-top:100px;}