वेबसाइट पृष्ठभूमि के रूप में बूटस्ट्रैप कैरोसेल

Question

मैं अपने वेब प्रोजेक्ट विकास के लिए twitter bootstrap carcass का उपयोग कर रहा हूं। वर्तमान में मैं पूर्ण स्क्रीन पृष्ठभूमि छवि जो मैं की तरह शरीर टैग के लिए निर्धारित किया है:

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

यह अच्छा लग रहा है, और काम करता है आकार बदलने पूरी तरह से जब मैं ब्राउज़र विंडो आकार बदलने के लिए कोशिश कर रहा हूँ।

अब मैं पृष्ठभूमि कैरोसेल जोड़कर अपनी वेबसाइट पर कुछ दृश्य प्रभाव जोड़ना चाहता हूं। क्या संपूर्ण पृष्ठभूमि में मानक बूटस्ट्रैप कैरोसेल को लागू करने का कोई तरीका है?

मुझे एक संभावित समाधान HERE मिला, लेकिन मुझे क्या भ्रमित करता है - आईएमजी टैग है जो विभिन्न छवियों के लिए उपयोग कर रहे हैं। मैं पृष्ठभूमि यूआरएल के माध्यम से ऐसा करने की कोशिश कर रहा था, लेकिन इसे समझ नहीं सकता।

Answer 1

समस्या हल हो गई है। कोड का स्रोत HERE है। यह तुलना में मैंने सोचा था कि आसान है:

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> 

सीएसएस:

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

जे एस:

<script type="text/javascript"> 
    $(document).ready(function() { 
    $('.carousel').carousel({interval: 7000}); 
    }); 
</script> 

Answer 2

मैं mbigun करने के इस सीएसएस का उपयोग करने के रखने के लिए उत्तर जोड़ना होगा झटके से छवियां:

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