Skip to main content
danyaalk74530408
danyaalk74530408
Known Participant
March 2, 2017
Answered

Image Carousel Background

  • March 2, 2017
  • 1 reply
  • 6489 views

Hi,

I am trying to remove the dark grey background that appears behind the images on my image carousel.

.carousel-control {

  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  width: 15%;

  font-size: 20px;

  color: #fff;

  text-align: center;

  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);

  background-color: rgba(0, 0, 0, 0);

  filter:progid:DXImageTransform.Microsoft.gradient(enabled='false');

  opacity: .5;

}

.carousel-control.left {

  background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);

  background-image:      -o-linear-gradient(left, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);

  background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, .0001)));

  background-image:         linear-gradient(to right, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);

  filter:progid:DXImageTransform.Microsoft.gradient(enabled='false');

  background-repeat: repeat-x;

}

.carousel-control.right {

  right: 0;

  left: auto;

  background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%);

  background-image:      -o-linear-gradient(left, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%);

  background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .0001)), to(rgba(0, 0, 0, .5)));

  background-image:         linear-gradient(to right, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%);

  filter:progid:DXImageTransform.Microsoft.gradient(enabled='false');

  background-repeat: repeat-x;

}

.carousel-control:hover,

.carousel-control:focus {

  color: #fff;

  text-decoration: none;

  filter: alpha(opacity=90);

  outline: 0;

  opacity: .9;

}

I am not sure what part of the coding needs changing to remove the dark grey background.

Appreciate any help.

Danyaal.

    This topic has been closed for replies.
    Correct answer Nancy OShea

    Hi,

    I have attached my files as a zip.​

    Websitecoursework.zip

    <https://drive.google.com/a/preston-manor.com/file/d/0BxUHVcr21is0WFhYUVRIOGtEbWM/view?usp=drive_web>

    ​


    Copy & paste this code into a new, blank document.  SaveAs test.html and preview in browsers.

    <!doctype html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>Bootstrap 3.3.7 Starter</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- Latest compiled and minified Bootstrap CSS-->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!--custom CSS-->

    <style>

    .center-block {float:none}

    /**REMOVE BACKGROUNDS**/

    .carousel-control, .carousel-control.left, .carousel-control.right  {

    background-color:none;

    background-image:none;

    color: #333;

    }

    </style>

    </head>

    <body>

    <div class="container">

    <div class="row">

    <div class="col-md-10 center-block text-center">

    <h1>My Awesome Website</h1>

    <h2>Some pithy slogan...</h2>

    </div>

    <!--begin Bootstrap Carousel-->

    <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="5200">

    <!-- Indicators -->

    <ol class="carousel-indicators">

    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>

    <li data-target="#myCarousel" data-slide-to="1"></li>

    <li data-target="#myCarousel" data-slide-to="2"></li>

    <li data-target="#myCarousel" data-slide-to="3"></li>

    </ol>

    <!-- Wrapper for slides -->

    <div class="carousel-inner" role="listbox">

    <div class="item active">

    <img class="img-responsive center-block"  src="http://lorempixel.com/500/600/technics/4" alt="...">

    <div class="carousel-caption">

    <h3>Heading 3</h3>

    <p>Details....</p>

    </div>

    </div>

    <div class="item">

    <img class="img-responsive center-block"  src="http://lorempixel.com/500/600/technics/3" alt="...">

    <div class="carousel-caption">

    <h3>Heading 3</h3>

    <p>Details....</p>

    </div>

    </div>

    <div class="item">

    <img class="img-responsive center-block"  src="http://lorempixel.com/500/600/technics/2" alt="...">

    <div class="carousel-caption">

    <h3>Heading 3</h3>

    <p>Details....</p>

    </div>

    </div>

    <div class="item">

    <img class="img-responsive center-block"  src="http://lorempixel.com/500/600/technics/1" alt="...">

    <div class="carousel-caption">

    <h3>Heading 3</h3>

    <p>Details....</p>

    </div>

    </div>

    <!--end active-->

    </div>

    <!-- Left and right controls -->

    <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">

    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

    <span class="sr-only">Next</span> </a>

    <!--end carousel--></div>

    <!--end row--></div>

    <!--end container--></div>

    <!--jQuery-->

    <script src="https://code.jquery.com/jquery-1.12.2.min.js" integrity="sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk=" crossorigin="anonymous">

    </script>

    <!--Bootstrap-->

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    </body>

    </html>

    1 reply

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    March 2, 2017

    Most likely all of this will need to be removed.  But the only way to know for sure is to upload your work to your web site and post the URL.

    background-color: rgba(0, 0, 0, 0);

      filter:progid:DXImageTransform.Microsoft.gradient(enabled='false');

      opacity: .5;

    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%);

      background-image:      -o-linear-gradient(left, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%);

      background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .0001)), to(rgba(0, 0, 0, .5)));

      background-image:         linear-gradient(to right, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%);

      filter:progid:DXImageTransform.Microsoft.gradient(enabled='false');

      background-repeat: repeat-x;

    Nancy

    Nancy O'Shea— Product User & Community Expert
    danyaalk74530408
    danyaalk74530408Author
    Known Participant
    March 2, 2017

    Hi,

    I don't have a website yet. I am just testing the site on my internet browser.

    Thanks

    Danyaal.

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    March 2, 2017

    Open in your browser and right-click, select Inspect Element to see which CSS code is effecting your Carousel background.

    Below is a live demo I put up yesterday for another discussion.  In this example, I removed backgrounds from the default Bootstrap Carousel's left and right controls.

    Bootstrap 3.3.7

    This is the relevant CSS code (view source in browser).

    .carousel-control.left, .carousel-control.right {

    background-image:none;
    color: rgba(0,0,0,0.3);
    }

    Nancy

    Nancy O'Shea— Product User & Community Expert
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices