How to Use Background Image in BootStrap .carousel-control

Question

Can you please let me know how I can update the .carousel-control CSS to use a background image like This Arrows image?
I tried to update this CSS code by adding the

position:absolute;
display:none;
top:50%;
margin-top:-28px;
z-index:60;
height: 50px;
width: 51px;
background-image: url(http://www.promap.ca/img/arrows.png);
/*max-height:20%;
max-width:12%;
background-size:200% 200%;*/

To following code but it didn't go through!

.carousel-control {
    position: absolute;
    top: 40%;
    left: 15px;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    font-size: 60px;
    font-weight: 100;
    line-height: 30px;
    color: #ffffff;
    text-align: center;
    background: #222222;
    border: 3px solid #ffffff;
    -webkit-border-radius: 23px;
    -moz-border-radius: 23px;
     border-radius: 23px;
     opacity: 0.5;
     filter: alpha(opacity=50);
 }

.carousel-control.right {
    right: 15px;
    left: auto;
}

.carousel-control:hover,
.carousel-control:focus {
    color: #ffffff;
    text-decoration: none;
    opacity: 0.9;
    filter: alpha(opacity=90);
}

Answer 1

Bootstrap Carousel Orientation

I'm also not sure where you want this image to go. Where it gets put is very important

Look at this Bootply to see where each of the css background colors gets applied - that's where your image will go:

.carousel .container {
  background-color: red;
}

.carousel-control {
  background-color: green;
}

.carousel .item {
  background-color: black;
}

.carousel-caption h1,
.carousel-caption .lead {
    background-color: yellow;
}

Customize Carousel Arrows

I'm guessing that you're trying to customize the arrows specifically since that's the name of your image file.

By Default the arrow image is just a < or > character by using glyphs to specify the content of the anchor tag with the before selector as seen in the bootstrap.css file here:

.carousel-control .icon-prev:before { content: '\2039'; }
.carousel-control .icon-next:before { content: '\203a'; }

You can add whatever content you'd like for left and right arrows by specifying it in the innerHtml of the arrow anchor tags

<div id="myCarousel" class="carousel slide">
  <div class="carousel-inner">...</div>
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <img src="http://i.imgur.com/QPWSDdP.png"/>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <img class="flipped" src="http://i.imgur.com/QPWSDdP.png" />
  </a>
</div>

If you have a different image for the next arrow, you can use that, or you can apply a css class to it and flip it horizontally with the following css:

.flipped {
    -webkit-transform: scale(-1, 1);
     -khtml-transform: scale(-1, 1);
       -moz-transform: scale(-1, 1);
        -ms-transform: scale(-1, 1);
         -o-transform: scale(-1, 1);
            transform: scale(-1, 1);
}

Also, add some css so the carousel image defaults don't apply to your arrows:

#myCarousel a img {
    width:  20px !important;
    height: 40px !important;
}

Demo in jsFiddle

Answer 2

If you want to use background image and hide default icons

.carousel-control .icon-prev:before { content: ''; }
.carousel-control .icon-next:before { content: ''; }