Unable to set image for bxSlider 'next/prev' controls

Question

Question Background:

I'm using bxSlider to implement a gallery in my site as shown:

The Issue:

I'm trying to set the prev and next controls to the prev and next arrows supplied in the controls.png image file with the bxSlider project as shown:

Currently I'm not able to set these images and the prev and next controls of my image are just < >, as shown (please note: these can be seen in the gallery picture at the top of this question):

The code:

HTML markup for the bxSlider gallery:

  <div class="bxslider-controls">
            <span id="bx-prev4"><a class="bx-next"></a></span>
            <span id="bx-next4"><a class="bx-prev"></a></span>
        </div>
        <ul class="bxslider" id="bx4">
            <li>
                <img src="~/Images/wf1.jpg" alt="...">
            </li>
            <li>
                <img src="~/Images/wf2.jpg" alt="...">
            </li>
            <li>
                <img src="~/Images/wf3.jpg" alt="...">
            </li>
            <li>
                <img src="~/Images/wf4.jpg" alt="...">
            </li>
        </ul>

Currently I've changed the background image url to the controls.png file (stored in the Images folder on my site) on the .bx-prev and .bx-prev CSS styling in the bxSlider.css class:

.bx-wrapper .bx-prev {
   left: 10px;
   background: url(~/Images/controls.png) no-repeat 0 -32px;
}

.bx-wrapper .bx-next {
   right: 10px;
   background: url(~/Images/controls.png) no-repeat -43px -32px;
}

The following JQuery is used to control the bxSlider gallery images, not the nextText and prevText properties:

  $(document).ready(function () {

    $('#bx4').bxSlider({
        hideControlOnEnd: true,
        minSlides: 4,
        maxSlides: 4,
        slideWidth: 360,
        slideMargin: 10,
        pager: false,
        nextSelector: '#bx-next4',
        prevSelector: '#bx-prev4',
        nextText: '>',
        prevText: '<',

     });
   });

Any help in working out why I cant apply the images in controls.png to the prev and next tags in the HTML would be great.

UPDATE:

New CSS styling named anchors:

.anchors{
    display:inline-block;
    height:50px;
    width:50px;
}

Applied to the tags:

<div class="bxslider-controls">
   <span id="bx-prev4"><a class="bx-next anchors"></a></span>
   <span id="bx-next4"><a class="bx-prev anchors"></a></span>
</div>

I've removed the ~ from the Image path:

.bx-wrapper .bx-prev {
    left: 10px;
    background: url(/Images/controls.png) no-repeat 0 -32px;
}

.bx-wrapper .bx-next {
    right: 10px;
    background: url(/Images/controls.png) no-repeat -43px -32px;
}

Output now:

As can be seen the inline spacing has taken affect but still the images do not show.

Answer 1

Try:

.bx-wrapper .bx-prev {
    left: 10px;
    width: 32px; 
    height: 32px;
    background: url(~/Images/controls.png) no-repeat 0 -32px;
}

.bx-wrapper .bx-next {
    right: 10px;
    width: 32px; 
    height: 32px;
    background: url(~/Images/controls.png) no-repeat -43px -32px;
} 

Answer 2

I worked with bxslider on rails and it's worked like this:

  $(document).ready(function () {

    $('#bx4').bxSlider({
        hideControlOnEnd: true,
        minSlides: 4,
        maxSlides: 4,
        slideWidth: 360,
        slideMargin: 10,
        pager: false,

     });
   });

and css:

.bx-wrapper .bx-next {
  right: 10px;
  background: image-url('controls.png') no-repeat -43px -32px;
}