<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <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> <div class="carousel-inner"> <div class="item active"> <div class="fill" style="background-image:url('http://lorempixel.com/1500/450/abstract/3');"></div> <div class="carousel-caption hidden-xs"> <h3>First slide</h3> <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p> </div> </div> <div class="item"> <div class="fill" style="background-image:url('http://lorempixel.com/1500/450/abstract/2');"></div> <div class="carousel-caption hidden-xs"> <h3>Second slide</h3> <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p> </div> </div> <div class="item"> <div class="fill" style="background-image:url('http://lorempixel.com/1500/450/abstract/1 ');"></div> <div class="carousel-caption hidden-xs"> <h3>Third slide</h3> <p>Try to resize this carousel.</p> </div> </div> </div><!--/.carousel-inner --> <div class="main-text"> <h1>Welcome to this site</h1> <h3>Li Europan lingues es membres del sam familie.</h3> </div><!--/.main-text --> <!-- small chevrons 'cause they suck less --> <!-- also the next and prev buttons placed after the main-text to prevent unwanted collision --> <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> <small><span class="glyphicon glyphicon-chevron-left"></span></small> </a> <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> <small><span class="glyphicon glyphicon-chevron-right"></span></small> </a> </div><!--/.carousel --> </div><!-- .container -->

.main-text { color:#FFF; position: absolute; text-align: center; /* shadow. I like shadow. */ text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.6); top: 50px; width: 100%; } .carousel .item { /*This is to make the carousel content readable on an unloaded background-image (mobile devices)*/ background-color: #777; } .fill { background-position: center; background-size: cover; /* Set the height of the carousel here: */ height: 450px; width:100%; }