Applying Banner Background on Bootstrap Carousel

Banners may be placed in the background within Bootstrap carousel by applying some adjustments in the CSS. A screen shot of the carousel banner is shown below:

The template for the carousel can be downloaded from http://getbootstrap.com/examples/carousel/ comes with a carousel.css file. This is where the CSS will be adjusted.

I've designed a very simple banner that will go with the slide- a Nippon rising sun on black background, blackrisingsun.png:

The CSS for the background banner will position horizontally and vertically. Take note that we are designing for mobile devices as well. The design of the banner may be considered for this. Since the left and right sides will be clipped out, perhaps its a good idea to put emphasis on the center of the background.

The set of codes that display the carousel is as follows:

<div class="carousel-inner">
        <div class="item">
          <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide"><!---->
          <div class="container">
            <div class="carousel-caption">
     <h1>Example headline.</h1>
     <p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
     <p><a class="btn btn-lg btn-primary" href="http://getbootstrap.com/examples/carousel/#" role="button">Sign up today</a></p>
            </div>
          </div>
        </div>
        <div class="item active">
          <img src="data:image/gif;base64,R0lGODlhAQABAIAAAGZmZgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide">
          <div class="container">
            <div class="carousel-caption">
              <h1>Another example headline.</h1>
     <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>
     <p><a class="btn btn-lg btn-primary" href="http://getbootstrap.com/examples/carousel/#" role="button">Learn more</a></p>
            </div>
          </div>
        </div>
        <div class="item">
          <img src="data:image/gif;base64,R0lGODlhAQABAIAAAFVVVQAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide">
          <div class="container">
            <div class="carousel-caption">
              <h1>One more for good measure.</h1>
     <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>
     <p><a class="btn btn-lg btn-primary" href="http://getbootstrap.com/examples/carousel/#" role="button">Browse gallery</a></p>
            </div>
          </div>
        </div>
      </div>

Notice the <img> tags before the div class .container- this displays the background of each slide. This may either be removed or commented out:

Next, on carousel.css, add the style below. The background URL should point to the image.

.carousel .carousel-inner {
background: url('images/blackrisingsun.png') no-repeat center center;
background-color:#777;
}

This should now display the carousel with the background:

Need help on some web coding task? Let me know about it. Email me at jrwxpun.dolor@gmqoapmssail.co57agsblm and I'll be more than happy to blog about it with my thoughts.