I'm using twitter bootstrap carcass for my web project development. Currently I have full screen background image which I set for the body tag like:
body {
background: url('Content/images/planet.gif') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
It looks nice, and resizing works perfectly when I'm trying to change browser window size.
Now I would like to add some visual effects to my website by adding background carousel. Is there way to implement standard bootstrap carousel to the whole background?
I found a possible solution HERE, but what confuses me - is img tags which are using for different images. I was trying to do the same through background url's, but can't to figure it out.
The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.
The Carousel plugin is a component for cycling through elements, like a carousel (slideshow). Tip: Plugins can be included individually (using Bootstrap's individual "carousel. js" file), or all at once (using "bootstrap. js" or "bootstrap.
Problem has been solved. Source of code is HERE. It's easier than I thought:
HTML:
<div id="myCarousel" class="carousel container slide">
<div class="carousel-inner">
<div class="active item one"></div>
<div class="item two"></div>
<div class="item three"></div>
</div>
</div>
CSS:
.carousel { z-index: -99; } /* keeps this behind all content */
.carousel .item {
position: fixed;
width: 100%; height: 100%;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-ms-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
.carousel .one {
background: url(assets/img/slide3blur.jpg);
background-size: cover;
-moz-background-size: cover;
}
.carousel .two {
background: url(assets/img/slide2blur.jpg);
background-size: cover;
-moz-background-size: cover;
}
.carousel .three {
background: url(assets/img/slide1blur.jpg);
background-size: cover;
-moz-background-size: cover;
}
.carousel .active.left {
left:0;
opacity:0;
z-index:2;
}
JS:
<script type="text/javascript">
$(document).ready(function() {
$('.carousel').carousel({interval: 7000});
});
</script>
I would add to mbigun's reply to use this css to keep the images from jerking:
.carousel { z-index: -99; } /* keeps this behind all content */
.carousel .item {
position: fixed;
opacity: 0;
left:0 !important;
width: 100%; height: 100%;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-ms-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.carousel .one {
background: url(../images/layout/bgimages/homepage1.jpg);
background-size: cover;
-moz-background-size: cover;
}
.carousel .two {
background: url(../images/layout/bgimages/homepage2.jpg);
background-size: cover;
-moz-background-size: cover;
}
.carousel .three {
background: url(../images/layout/bgimages/homepage3.jpg);
background-size: cover;
-moz-background-size: cover;
}
.carousel .active {
opacity: 1 !important;
}
.carousel .left {
opacity: 1 !important;
-webkit-transition: opacity 0.5s !important;
-moz-transition: opacity 0.5s !important;
-ms-transition: opacity 0.5s !important;
-o-transition: opacity 0.5s !important;
transition: opacity 0.5s !important;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With