Getting Background Image to Show on First Slide of Bootstrap Carousel

Question

I have created a Bootstrap carousel, and I am using custom css to define a background image for each of the three slides. For some reason, the background image is not appearing on the first slide, although the background images for slides 2 and 3 are appearing ok. I can't work out what is wrong. I think it may be something to do with the active class being applied just to the first slide?? Here is the HTML and CSS for the first slide, the carousel is called myCarousel, thanks:

HTML:

<!-- class item means item in carousel -->        
    <div id="slide1" class="item active">


        <!--
        <img src="http://placehold.it/1200x500">
         -->

        <h1>HELLO THERE</h1>

        <div class="carousel-caption">

            <h4>High Quality Domain Names</h4>
            <p>Domains that can help your business marketing</p>

        </div> <!-- close carousel-caption -->

        </div> <!-- close slide1 -->

CSS:

#myCarousel .item { height: 400px; } 


      <!-- top left is the background position of the image, no repeat          because we don't want the background image repeating -->
         #slide1 {
        background: url('images/carousel_medium_01.jpg') top center no-        repeat;
  }

Answer 1

Instead of putting your code directly on the <div class="item"> I suggest to make a nested div (replacing the image) and apply a height, width and background-image properties there instead. Like this:

HTML

<div class="carousel-inner" role="listbox">
    <div class="item">
        <div class="item-custom first"></div>
    </div>
    <div class="item">
        <div class="item-custom second"></div>
    </div>
    <div class="item active">
        <div class="item-custom third"></div>
    </div>
</div>

CSS

.item-custom {
    height: 100%;
    width: 100%;
}

Then for your .first, .second, and .third classes you can add the background-images you want. That should get you going in the right direction. Hope that helps.

Answer 2

The code above is loading the placeholder background image, but it is only visible behind the h1 element due to the lack of the parent #myCarousel div. The CSS is looking for the parent div on which to apply the explicit height and width. Try adding the parent div:

<!-- class item means item in carousel -->
<div id="myCarousel">
    <div id="slide1" class="item active">
        <!--<img src="http://placehold.it/1200x500">-->
        <h1>HELLO THERE</h1>
        <div class="carousel-caption">
            <h4>High Quality Domain Names</h4>
            <p>Domains that can help your business marketing</p>
        </div> <!-- close carousel-caption -->
    </div> <!-- close slide1 -->
</div>

This allows your height/width properties to be applied, and for the background image to display.

Along with crazymatt's suggestion to organize the nested elements a bit more, you can use the background-size and background-position rules to display the image as needed for each individual slide.

jsfiddle example

Answer 3

I have found the solution by ammending the media queries that the site was using. What I had to do was make sure that I had an explicit media query rule to cover all potential screen widths. In the media queries, I specified the background images for the carousel slides. By doing this, I found I always had the background images correctly populated. Previously, for a certain range of screen sizes, I was just letting default CSS define the background images, and this meant the background image for the first slide didn't show. I guess adding media queries for all possible screen sizes meant there was always a "trigger" to populate the background images.

Thanks also to those who offered a reply.