Bootstrap carousel as website background

问题

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.

回答1:

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>

回答2:

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

来源：https://stackoverflow.com/questions/19469705/bootstrap-carousel-as-website-background

标签

css3

twitter-bootstrap

background-image

carousel