Как заменить ссылку на картинку

$('.bxslider').bxSlider({ 
  nextSelector: '#slider-next', 
  prevSelector: '#slider-prev', 
  nextText: ' ', 
  prevText: ' ' 
});

#slider-next a{ 
  background: url(http://www.clker.com/cliparts/V/1/Z/A/h/U/left-arrow-right-hi.png); 
  background-size:cover; 
  display:inline-block; 
  height:60px; 
  width:38px; 
} 
#slider-prev a{ 
  background: url(http://www.clker.com/cliparts/Z/n/k/Z/y/j/left-arrow-gray-hi.png); 
  background-size:cover; 
  display:inline-block; 
  height:60px; 
  width:38px; 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.css" rel="stylesheet"/> 
 
<ul class="bxslider"> 
  <li><img src="http://bxslider.com//images/730_200/hill_trees.jpg" /></li> 
  <li><img src="http://bxslider.com//images/730_200/me_trees.jpg" /></li> 
  <li><img src="http://bxslider.com//images/730_200/houses.jpg" /></li> 
</ul> 
 
<div class="outside"> 
  <h3>This div is outside of the slider</h3> 
  <p><span id="slider-prev"></span><span id="slider-next"></span></p> 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.js"></script>