Pager CSS

Nov 26, 2013 at 8:11 PM
I'm trying to update how the Pager looks using css but it's not being displayed, it's there, but it's behind the slider.
I made updates inside Module.css
ol.wnsSliderPager
{
    padding: 0;
    display: block;
    clear: both;
    float: right;
    list-style: none;
    position: relative;
    top: -25px;
    right: 1%;
    z-index:900;
}

ol.wnsSliderPager li.wnsSliderPagerItem
{
    float: left;
    margin: 0 1px;
    list-style-type: none;
    display: inline;
    margin-right: 0.75em;
    z-index:950;
}

ol.wnsSliderPager li.wnsSliderPagerItem a
{
    display: block;
    width: 13px;
    height: 0;
    padding-top: 13px;
    background-image: url("~/images/pagination.png");
    background-position: 0 0;
    float: left;
    overflow: hidden;
}

ol.wnsSliderPager li.wnsSliderPagerItem a.active, ol.wnsSliderPager li.wnsSliderPagerItem a:hover.active
{
    background-position: 0 -13px;
}

ol.wnsSliderPager li.wnsSliderPagerItem a:hover
{
    background-position: 0 -26px;
}
The positions are correct, I can select the object, but it's just not viewing. I would think it was that the image wasn't being displayed, and that could be it. But the image itself exists, so, I'm not sure.

Assistance in pointing me towards the right direction is greatly appreciated
Nov 26, 2013 at 8:19 PM
nevermind...turns out it was because I had the ~ in front of the image url...
Marked as answer by hamster91 on 11/26/2013 at 12:19 PM