在css中重叠图像

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;
}