Bootstrap Karussell als Website Hintergrund

Question

Ich verwende twitter bootstrap carcass für meine Web-Projektentwicklung. Zur Zeit habe ich Vollbild Hintergrundbild, das ich für den Body-Tag gesetzt wie:

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; 
} 

Es sieht nett aus, und funktioniert perfekt Ändern der Größe, wenn ich versuche, Browser-Fenstergröße zu ändern.

Jetzt möchte ich einige visuelle Effekte zu meiner Website hinzufügen, indem Sie Hintergrundkarussell hinzufügen. Gibt es eine Möglichkeit, ein Standard-Bootstrap-Karussell für den gesamten Hintergrund zu implementieren?

Ich fand eine mögliche Lösung HERE, aber was mich verwirrt - ist img-Tags, die für verschiedene Bilder verwenden. Ich habe versucht, das gleiche durch Hintergrund-URLs zu tun, kann es aber nicht herausfinden.

Answer 1

Problem wurde gelöst. Quellcode ist HERE. Es ist einfacher, als ich dachte:

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> 

Answer 2

Ich möchte hinzufügen, auf die mbigun antworten diese CSS zu verwenden, die halten Bilder von Rucken:

.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; 
}