css3 - Cannot remove shaded background of carousel - CSS -


link website test page:

webpage link

i'm trying have carousel no background. images , indicators displayed is.

have tried this:

.carousel{      background:none;      background-color: none;  } 

which didn't make difference, tried adding placeholder background see did:

.carousel{      background: url(http://placehold.it/620x420/); 

}

this added placeholder background behind shading of carousel. i've uploaded image here: carousel screenshot

hopefully knows i've done wrong, in advance.

edit: added html code carousel:

                                            <!-- image gallery start-->                                          <br/><br/>                                          <div id="carousel" class="carousel slide" data-ride="carousel" style="max-width: 400px; margin: 0 auto">                                             <!-- indicators -->                                             <ol class="carousel-indicators">                                                  <li data-target="#sunicecarousel" data-slide-to="0" class="active"></li>                                                  <li data-target="#sunicecarousel" data-slide-to="1"></li>                                                  <li data-target="#sunicecarousel" data-slide-to="2"></li>                                                  <li data-target="#sunicecarousel" data-slide-to="3"></li>                                             </ol>                                                  <!-- wrapper slides -->                                                 <div class="carousel-inner" role="listbox">                                                      <div class="item active">                                                         <img class="img-responsive center-block" src="/images/sunice/sunice1.png" width="350" alt="chania">                                                     </div>                                                      <div class="item">                                                         <img class="img-responsive center-block" src="/images/sunice/sunice2.png" width="350" alt="chania">                                                     </div>                                                      <div class="item">                                                       <img class="img-responsive center-block" src="/images/sunice/sunice1.png" width="350" alt="chania">                                                     </div>                                                      <div class="item">                                                       <img class="img-responsive center-block" src="/images/sunice/sunice2.png" width="350" alt="chania">                                                     </div>                                                  </div>                                                   <!-- left , right controls -->                                                   <a class="left carousel-control" href="#carousel" role="button" data-slide="prev">                                                     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>                                                     <span class="sr-only">previous</span>                                                   </a>                                                   <a class="right carousel-control" href="#carousel" role="button" data-slide="next">                                                     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>                                                     <span class="sr-only">next</span>                                                   </a>                                                                                          </div>                                     </br></br>                                     <!-- image gallery end-->  

i've checked online example, carousel adds class active current active item. in style.css active class has following style:

.active{     background: url("images/active-bg.png") repeat scroll 0 0 rgba(0, 0, 0, 0) !important;     color: #fff !important; } 

you need remove background property , you'll have transparent background every carousel item.


Comments

Popular posts from this blog

Failed to execute goal org.apache.maven.plugins:maven-surefire-plugin:2.12:test (default-test) on project.Error occurred in starting fork -

windows - Debug iNetMgr.exe unhandle exception System.Management.Automation.CmdletInvocationException -

configurationsection - activeMq-5.13.3 setup configurations for wildfly 10.0.0 -