Apply "background-size:cover" to Twitter Bootstrap Carousel slides

Question

I am working with a basic Bootstrap Carousel with three slides. Before I implemented the slider, I had one static image via css background-image of its respective div. In my CSS, I was using background-size:cover, and really liked the way the image responded to different browser widths. Depending on the width of my image, I could get the important section of the image to always stay visibile and centered, while the extra width on either side was only visible on widescreen monitors as an added effect.

I want to retain that same image behavior now that I'm using Bootstrap's Carousel, but even if I assign dimensions to the slide's viewport, I still can't get my background images to show up. I currently have it set up so each slide displays a separate css class, and each one has a different background image so it can scroll between three images.

If this is not possible via background-image, it there another way to manipulate image elements so their display behavior is the same as background-size:cover?

Here's my HTML:

 <div id="myCarousel" class="carousel slide">
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item ad1">
      <img src="{{ STATIC_URL }}img/TestBannerAd.png">
    </div>
    <div class="item ad2">
      <img src="{{ STATIC_URL }}img/TestBannerAd2.png">
    </div>
    <div class="item ad3">
      <img src="{{ STATIC_URL }}img/TestBannerAd3.png">
    </div>
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

And my CSS:

#myCarousel {
    width: 100%;
}
.carousel-control {
    margin-top: 20px;
}
.carousel-inner {
    width: 100%;
    height: 400px;
}
.ad1 {
    background: url(../img/TestBannerAd.png) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.ad2 {
    background: url(../img/TestBannerAd2.png) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.ad3 {
    background: url(../img/TestBannerAd3.png) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Hopefully this isn't a stupid question and we can figure this out!

Ana Mendoza · Answer 1 · 2013-03-11T20:11:24.967

I know my response is quite late, but I just found your question through a search to do something similar. First of all, you need to remove the images from the HTML and change a bit the CSS to apply the height to all divs with class "item" inside the carousel.

Applying my modifications to your code it should be something like this:

<div id="myCarousel" class="carousel slide">
  <!-- Carousel items -->
  <div class="carousel-inner">
     <div class="item active ad1">
        <div class="carousel-caption">
           <h4>First Thumbnail label</h4>
           <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
        </div>
     </div>
     <div class="item ad2">
        <div class="carousel-caption">
            <h4>Second Thumbnail label</h4>
            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
         </div>
     </div>
     <div class="item ad3">
        <div class="carousel-caption">
           <h4>Third Thumbnail label</h4>
           <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
        </div>
    </div>
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

And the CSS:

#myCarousel {
    width: 100%;
}
.carousel-control {
    margin-top: 20px;
}
.carousel-inner .item {
    width: 100%;
    height: 400px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.ad1 {
    background: url(../img/TestBannerAd.png) no-repeat center center fixed; 
}
.ad2 {
    background: url(../img/TestBannerAd2.png) no-repeat center center fixed; 
}
.ad3 {
    background: url(../img/TestBannerAd3.png) no-repeat center center fixed; 
}

Thanks for posting this. I was able to achieve what I wanted to do but I can't seem to add text to those slides. ANy idea how I would do that with your code? Thanks — AAA, Mar 02 '13 at 17:16
I've modified the code with the markup for slide titles and text, just a div inside with the class "carousel-caption" with a heading and a paragraph. I've also added the "active" class to the first slider, it wouldn't work properly otherwise. — Ana Mendoza, Mar 11 '13 at 20:14

score 8 · Answer 2 · answered Jan 16 '14 at 12:43

8

That's jQuery equivalent of the cover code:

 $.each( jQuery('.carousel .item'), function( i, val ) {
    $(this).css('background-image','url('+$(this).find('img').attr('src')+')').css('background-size','cover').find('img').css('visibility','hidden');
  });

It takes image source and passes into item and then hides actual image.

Additionally you may need to hide carousel until jQuery.each completes. I suggest to do visibility:hidden hack for images on CSS level. So users won't be noticed image enlargement on bigger screens.

answered Jan 16 '14 at 12:43

tolginho

583
9
12

Nice approach there. But it won't work if JS is disabled. – jaysingkar Jul 28 '16 at 21:49
6

Does the carousel even work with JS disabled? People with js disabled should deal with their choice to break user experiences. – KinsDotNet Jan 04 '17 at 18:08
Nice :) Had to set height of both .carousel and .item to prevent huge images from blowing up the lay-out. – Brainfeeder Jan 13 '17 at 14:43

score 1 · Answer 3 · answered Aug 22 '17 at 20:00

Just found this codepen https://codepen.io/wisnust10/pen/mPJwWv/ which uses another solution. (see css)

.item:nth-child(1) {
  background: url('https://snap-photos.s3.amazonaws.com/img-thumbs/960w/HZZKGVVJ6I.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
    }

Tested this in chrome and IE and it does the trick.

Hope it can help somehow.

antelove · Answer 4 · 2019-05-30T04:09:54.103

Using "background property" in ".item" class and "img" tags is not used

.carousel {
    height: 300px;
}

.carousel-inner {
    height: 100%;
}

.item {
    width: 100%;
    height: 100%;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    background-position: center;
}
/*
img {                
    object-fit: cover;
}
*/

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
        
<div id="myCarousel" class="carousel slide">

    <!-- Carousel items -->
    <div class="carousel-inner">
    
        <div class="item active" style="background-image: url(https://dummyimage.com/300x200/000/fff)" >
<!--            <img src="http://placehold.it/650x450/aaa&text=Item 1" style="width: 100%; height: 100%" /> -->
        </div>
        
        <div class="item" style="background-image: url(https://dummyimage.com/600x400/000/fff)" >
<!--            <img src="http://placehold.it/350x350/aaa&text=Item 2" style="width: 100%; height: 100%" /> -->
        </div>
        
        <div class="item" style="background-image: url(https://dummyimage.com/1200x800/000/fff)" >
<!--            <img src="http://placehold.it/350x350/aaa&text=Item 3" style="width: 100%; height: 100%" /> -->
        </div>
        
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">Next</span>
    </a>

</div>

Codepen

Editor

Full view

Version of img

Apply "background-size:cover" to Twitter Bootstrap Carousel slides

4 Answers4

Codepen

Linked