Overlapping an image in css - php

Question

I am using a PHP include that features my header content. For my navigation section I am using a list which just features text. I am using a small bit of php on the list items which basically states whatever the current page is, have an image displayed over that list item within the navigation. Below is what I am 'trying' to achieve:
As you can see, I want that blue shaped image placed over the top of the current page list item.
But below is what I have achieved and you will notice that the image is displayed but not like it should. I have used absolute positioning on the .current class which displays the whole image, however I cannot use absolute position on the image because then it wont display properly on another list item. What can I do?
Below is the relevant CSS and HTML/PHP:
<div id="navbar">
<ul>
<li><a <?php if (strpos($_SERVER['PHP_SELF'], 'index.php')) echo 'class="current"';?> href="#">Home</a></li>
<li><a <?php if (strpos($_SERVER['PHP_SELF'], 'shows.php')) echo 'class="current"';?> href="pages/shows.php">Shows</a></li>
<li><a <?php if (strpos($_SERVER['PHP_SELF'], 'classes.php')) echo 'class="current"';?> href="pages/classes.php">Classes</a></li>
<li><a <?php if (strpos($_SERVER['PHP_SELF'], 'noticeboard.php')) echo 'class="current"';?> href="pages/noticeboard.php">Notice Board</a></li>
<li><a <?php if (strpos($_SERVER['PHP_SELF'], 'about.php')) echo 'class="current"';?> href="pages/about.php">Our Story</a></li>
<li><a <?php if (strpos($_SERVER['PHP_SELF'], 'contact.php')) echo 'class="current"';?> href="pages/contact.php">Contact</a></li>
</ul>
.current {
width:138px;
height:57px;
background-image: url('../images/current.png');
background-repeat: no-repeat;
}

Answer 1

the <li> element is restricting the size of your <a> tag.
set the size of the individual <li> items to match the size of your tag and you will see the entire thing.
Modified code:
<div id="navbar">
<ul>
<li><a <?php if (strpos($_SERVER['PHP_SELF'], 'index.php')) echo 'class="current"';?> href="#">Home</a></li>
<li><a <?php if (strpos($_SERVER['PHP_SELF'], 'shows.php')) echo 'class="current"';?> href="pages/shows.php">Shows</a></li>
<li><a <?php if (strpos($_SERVER['PHP_SELF'], 'classes.php')) echo 'class="current"';?> href="pages/classes.php">Classes</a></li>
<li><a <?php if (strpos($_SERVER['PHP_SELF'], 'noticeboard.php')) echo 'class="current"';?> href="pages/noticeboard.php">Notice Board</a></li>
<li><a <?php if (strpos($_SERVER['PHP_SELF'], 'about.php')) echo 'class="current"';?> href="pages/about.php">Our Story</a></li>
<li><a <?php if (strpos($_SERVER['PHP_SELF'], 'contact.php')) echo 'class="current"';?> href="pages/contact.php">Contact</a></li>
</ul>
</div>
#navbar ul li {
width:138px;
height:57px;
}
.current {
width:138px;
height:57px;
background-image: url('../images/current.png');
background-repeat: no-repeat;
}

Answer 2

For obvious reasons, the background image of an element cannot overflow the element itself. Therefore, if you're putting the background image on your A tag, you need to make sure that the A tag is big enough to fit the background. You could try something like this:
A {
display: inline-block;
width: 138px;
height: 57px;
}
You'll have to adjust all your other CSS to position things properly.