Bootstrap Carousel images as CSS: background-images:

Bootstrap Carousel images as CSS: background-images.css

.slider-block{
	height:350px;
	display:inline-block;
}
#carousel {
	height:100%;
}
#carousel .carousel-inner{
	height:100%;
}
#carousel .item{
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center center;
	width:100%;
	height:100%;
}

Bootstrap Carousel images as CSS: background-images.html

<div class="slider-block">
	<div id="carousel" class="carousel slide" data-ride="carousel">
		<!-- Indicators -->
		<ol class="carousel-indicators">
		 </ol>
		<!-- Wrapper for slides -->
		<div class="carousel-inner" role="listbox">
			<div class="item active">
				<img src="images/slider1.jpg" class="img-responsive" alt="">
			</div>
			<div class="item">
				<img src="images/slider1.jpg" class="img-responsive" alt="">
			</div>
			<div class="item">
				<img src="images/slider1.jpg" class="img-responsive" alt="">
			</div>
		</div>
		<!-- Controls -->
		<a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
			<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
			<span class="sr-only">Previous</span>
		</a>
		<a class="right carousel-control" href="#carousel" role="button" data-slide="next">
			<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
			<span class="sr-only">Next</span>
		</a>
	</div>
</div>

Bootstrap Carousel images as CSS: background-images.js

//Replace carousel images into background images.
$('#carousel .item img').each(function() {
  var imgSrc = $(this).attr('src');
  $(this).parent().css({'background-image': 'url('+imgSrc+')'});
  $(this).remove();
});

Bootstrap Carousel images as SASS: background-images.sass

.slider-block
  height: 350px
  display: inline-block
  width:100%
#carousel
  height: 100%
  .carousel-inner
    height: 100%
  .item
    background-repeat: no-repeat
    background-size: cover
    background-position: center center
    width: 100%
    height: 100%