title: How to Use Background Image in BootStrap .carousel-control
body: <p>Can you please let me know how I can update the <code>.carousel-control</code> CSS to use a background image like <a href="http://promap.ca/img/arrows.png" rel="nofollow">This Arrows</a> image?<br />
  I tried to update this CSS code by adding the </p>
  
  
  
  <pre class="lang-css prettyprint-override"><code>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%;*/
  </code></pre>
  
  <p>To following code but it didn't go through!</p>
  
  <pre class="lang-css prettyprint-override"><code>.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);
  }
  </code></pre>