CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
user1120133
user1120133

Reputation: 3234

Carousel-caption is not showing in full width header carousel

Using full width header carousel with captions it is showing images but not captions. trying to find out since morning but unable.

please check jsfiddle

html,
body {
height: 100%;
}

/* You can change the height of the carousel by changing the height in the class below. It is set to 50% by default, but can be any height! */

.carousel {
height: 70%;
 }

.item,
.active,
 .carousel-inner {
height: 100%;
 }

/* Background images are set within the HTML using inline CSS, not here */

.fill {
width: 100%;
height: 100%;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}

  .carousel .item,
  .carousel .item.active,
 .carousel-caption h2 {
  font-family:Arial;
  font-size:60px;
  text-align:center;
 z-index:10;
  }

.carousel-caption .btn-default-outline {
font-family:Century Gothic;
background:none;
border: 4px solid #fff;
color:#fff;
padding: 15px 25px;
 }

.carousel-caption .btn-default-outline:hover {
background-color:#fff;
color:#000000;
}


  footer {
  margin: 50px 0;
}

it is not showing carousel caption.

Any one can figure out what is missing or i m doing wrong.

Thanks

Upvotes: 0

Views: 678

Answers (2)

Yomesh
Yomesh

Reputation: 288

Your inline-css is blocking the code below that to run. Simply put the inline-css of the three containers to css file.

See the fiddle

s1 {

background-image:url('http://upload.wikimedia.org/wikipedia/commons/archive/0/07/20060606172916%21UCT_Upper_Campus_landscape_view.jpg');

}

http://jsfiddle.net/coxuLkn6/4/

Upvotes: 1

Michael Doye
Michael Doye

Reputation: 8171

You might kick yourself when you realize the simplicity of this issue...

this character ” is wrong for the style attribute in your code and has malformed your HTML.

its starts on this line:

<div class="fill" style="background-image:url('http://upload.wikimedia.org/wikipedia/commons/archive/0/07/20060606172916%21UCT_Upper_Campus_landscape_view.jpg);”></div>

The closing quote is wrong and should be normal quotation mark ".

Its a very subtle difference but can cause a lot of issues. It might be a good idea to check all the quotes!

Upvotes: 2

Related Questions