I'm trying to get 3 images to cycle through as backgrounds for a Bootstrap 3 jumbotron. But the problem is that I have 3 divs within the jumbotron and all the solution i've tried so far requires me to change the position of the jumbotron to relative and the background images to absolute. And because I'm trying to keep the site responsive, doing so severely messes up the look at smaller scales.
I've also tried placing the jumbotron over a carousel by making the jumbotron absolute and carousel relative. The same scaling problem happens again at smaller screen sizes.
Is there an easy way to do this?
EDIT: I want my background to change similar to this site: http://www.in-toronto-web-design.ca/ and have it scale properly as well.
my code:
<!--begin jumbotron-top-->
<div class="jumbotron" id="jumbotron-top">
<!--navigation bar-->
<div class="row">
<nav class="navbar navbar-default transparent" id="navbar-main">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navCollapse">
<span class="sr-only">Toggle Navigation</span>
<span class="fa fa-chevron-down fa-2x"></span> <b>Menu</b>
</button>
</div>
<div class="collapse navbar-collapse" id="navCollapse">
<ul class="nav nav-stacked main-nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Company</a></li>
<li><a href="#">Contact</a></li>
</ul>
<hr>
</div>
</nav>
</div>
<!--end nav bar-->
<h1>Heading</h1>
<div class="container">
<p>Content</p>
<a class="btn btn-lg btn-success fp-buttons" href="#">
<span class="fa fa-dollar fa-2x"></span>Button1
</a>
<a class="btn btn-lg btn-success fp-buttons" href="#">
<span class="fa fa-check fa-2x"></span>Button2
</a>
</div>
</div>
<!--end jumbotron-top-->
Rather than recreate what is essentially a carousel, I suggest just using the built in carousel and modifying it to behave the way you want.
Here's how I would do this:
Bootply Demo
HTML:
<body>
<!--navigation bar-->
<nav class="navbar navbar-default transparent navbar-static-top" role="navigation" id="navbar-main">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navCollapse">
<span class="sr-only">Toggle Navigation</span>
<span class="fa fa-chevron-down"></span> <b>Menu</b>
</button>
<a class="navbar-brand" href="#">Your Brand</a>
</div>
<div class="collapse navbar-collapse" id="navCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Company</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!--end nav bar-->
<!--begin bg-carousel-->
<div id="bg-fade-carousel" class="carousel slide carousel-fade" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div class="slide1"></div>
</div>
<div class="item">
<div class="slide2"></div>
</div>
<div class="item">
<div class="slide3"></div>
</div>
</div><!-- .carousel-inner -->
<div class="container carousel-overlay text-center">
<h1>Get Kittens Free All Week Long</h1>
<p class="lead">Special orders also available upon request. Check out our pricing.</p>
<a class="btn btn-lg btn-success fp-buttons" href="#">
<span class="fa fa-dollar"></span> Get Pricing
</a>
<a class="btn btn-lg btn-success fp-buttons" href="#">
<span class="fa fa-check"></span> Sign Up
</a>
</div>
</div><!-- .carousel -->
<!--end bg-carousel-->
<div class="container">
<div class="row">
<div class="col-xs-12">
<p>Your other page content here...</p>
</div><!--/.col -->
</div><!--/.row -->
</div><!--/.container -->
<!-- Core JavaScript -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
CSS:
.navbar {
position: absolute;
top: 0;
left: 0;
right: 0;
}
.navbar-default.transparent {
background-color: transparent;
}
.slide1, .slide2, .slide3 {
min-height: 560px;
background-size: cover;
background-position: center center;
}
.slide1 {
background-image: url(http://placekitten.com/1000/300);
}
.slide2 {
background-image: url(http://placekitten.com/1100/300);
}
.slide3 {
background-image: url(http://placekitten.com/1200/300);
}
/* Carousel Fade Effect */
.carousel.carousel-fade .item {
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
-ms-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
transition: opacity 1s linear;
opacity: .5;
}
.carousel.carousel-fade .active.item {
opacity: 1;
}
.carousel.carousel-fade .active.left,
.carousel.carousel-fade .active.right {
left: 0;
z-index: 2;
opacity: 0;
filter: alpha(opacity=0);
}
.carousel-overlay {
position: absolute;
bottom: 100px;
right: 0;
left: 0;
}
You didn't post your css, so I had to make some assumptions about what you were trying to accomplish. For example, instead of having the navigation "inside" the jumbotron area, I placed it at the top of the page and gave it an absolute positioning so it would appear as though the nav was on top of the carousel background.
You'll probably also want to tweak the carousel-overlay positioning based on your content, as well as adjust the height of the carousel itself, by setting the min-height of the .slide*x* classes. I would also use media queries to adapt the min-height based on the the viewport height.
