Image Carousel Background

[danyaalk74530408]

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.

[Nancy OShea]

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

[danyaalk74530408]

Hi,

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

Thanks

Danyaal.

[Nancy OShea]

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

[danyaalk74530408]

Hi,

I've tried that but the colour still remains.

[Nancy OShea]

Did you refresh your browser?

[danyaalk74530408]

Yes.

[Nancy OShea]

A link to your web site is the quickest way to get help here.  You might want to procure some commercial or temporary web space very soon as you can't test and debug without one.

In the meantime, can you copy and paste your entire code into a web forum reply?  Don't use email, it won't come through.

Nancy

[danyaalk74530408]

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>

[Nancy OShea]

I'm sorry, I don't open ZIP files from anybody in public forums.  Nothing personal.   There's just too much malware floating around.  I can't afford to put my computer at risk.

Nancy

[Nancy OShea · Accepted solution]

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>

[danyaalk74530408]

Hi,

Thanks so much!

Danyaal.