Background image for tab selector not showing up

Question

I am trying to use a background image on an li-element to indicate the current tab being selected. The image is meant to overlap the li-element to show half-borders on top and bottom of the li-element and these borders turning up and down at the side of the tab panel.

The problem is that the image does not show up, even though it is clearly being found (according to the dev tool). If I set a background color or a frame around the div containing the background, that shows correctly and with the right dimensions. Here is my current code:

<ul class="ulTabSelect">
  <li><a href="#charTab">Character</a><div class="tabLiBG"></div></li>
  <li><a href="#skillTab">Skills</a><div class="tabLiBG"></div></li>
  <li><a href="#equipTab">Equipment</a><div class="tabLiBG"></div></li>
</ul>

And the css:

ul.ulTabSelect {
    font: 16px Verdana,sans-serif;
    left: 0;
    margin-top: 200px;
    top: 550px;
    width: 135px;
}

ul.ulTabSelect a {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.9);
    color: #9F9270;
    display: block;
    font: bold 1em sans-serif;
    padding: 5px 10px;
    text-align: right;
    text-decoration: none;
}

ul.ulTabSelect a:hover {
    color: #FFFFCC;
}


ul.ulTabSelect li {
    position: relative;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border: 0.1em solid rgba(0, 0, 0, 0.9);
    margin-bottom: 2px;
}

.ui-state-active .tabLiBG {
    position: absolute;
    display: block;
    top: -36px;
    left: 110px;
    width: 45px;
    height: 84px;
    background-image: url("/img/liSelect.png");
    background-repeat: no-repeat;
    background-position: 90px -27px;
    background-color: transparent;
    opacity: 1.0;
    z-index: 3;
}

.tabLiBG {
    display: none;
}

You can also see this in action at www.esobuild.com where it is the main tab selector to the left. Kinda run out of ideas here what to try to get it working.

Answer 1

It works ok if you set

background-position: -17px 11px;

or some value around that

Answer 2

I couldn't find the class ui-state-active in your html. That could be the issue.