Bootstrap carousel as website background

Question

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 {
         


        

Answer 1

Problem has been solved. Source of code is HERE. It's easier than I thought:

HTML:

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: