0

I am using bootstrap slider(https://blackrockdigital.github.io/startbootstrap-full-slider/) and i have to constant background image.I want to use only one image in background so that only content will slide.You guys can check link in that there are 3 images in background(slide one,slide two, slide three).I have to use only slide one image.would you help me in this?

  • 1
    Please check the html code carefully. Here is a look.
    if you change "Slide One" as you want, the text of image will be only changed automatically.
     – supernova Sep 23 '16 at 07:59
  • Thanks for reply Mr.Josef,No issue for that i will add other image.i given only example. –  Sep 23 '16 at 08:11
  • That's great. No problem. – supernova Sep 23 '16 at 08:12
  • U Can Learn More About That in The Below Link [Only One Image In Bootstrap Carousel to Slide](http://stackoverflow.com/questions/24926919/bootstrap-slide-only-one-image-among-the-multiple-images-in-an-item-of-the-caro) – Tamilmani Purushothaman Sep 23 '16 at 08:46
  • Thanks for reply Mr.Tamilmani, That's different issue.I have to display only one image.only content will slide after clicked. –  Sep 23 '16 at 08:52
  • You guys can check this link (http://stackoverflow.com/questions/39634480/how-to-display-background-image-for-quote-slider).This is the same issue i am asking. –  Sep 23 '16 at 08:55

1 Answers1

0

Using the below code

Css
    .carousel-inner {
        height: 100%;
            background-image:url('http://placehold.it/300?text=placehold');
    }

HTML
<!-- Wrapper for Slides -->
        <div class="carousel-inner">
            <div class="item active">
                <!-- Set the first background image using inline CSS below. -->
                <div class="fill" style="font-size: 32px;text-align: center;padding-top: 100px;">Slide 1</div>
                <div class="carousel-caption">
                    <h2>Caption 1</h2>
                </div>
            </div>
            <div class="item">
                <!-- Set the second background image using inline CSS below. -->
                <div class="fill" style="font-size: 32px;text-align: center;padding-top: 100px;">Slide 2</div>
                <div class="carousel-caption">
                    <h2>Caption 2</h2>
                </div>
            </div>
            <div class="item">
                <!-- Set the third background image using inline CSS below. -->
                <div class="fill" style="font-size: 32px;text-align: center;padding-top: 100px;">Slide 3</div>
                <div class="carousel-caption">
                    <h2>Caption 3</h2>
                </div>
            </div>
        </div>
Mohamed Insankamil MS
  • 206
  • 1
  • 3