Question

I’ve been working on this jsFiddle as an example of what I want. Basically the “li.current_page_item” has a background image on it. Which I’d like to surround the text when clicked.

The image size is 146 (W) x 44 (H)

I am having a little difficulty with it though and looking for some help. I’ve made the graphic one size, as it seemed the easier way.

Wondering if anyone can help me with it. To make sure the background switches to each active item and obviously prevent the list items from jumping too.

Thanks in advance.

Answer 1

I can see two reasons the background image is not fully showing.

The first is because you are setting a height and width on the li tag which is an inline element (so cannot have a set height or width). So you will need to set this as a block or inline-block element.

The second is that you are setting the background image on the anchor tag nested within li.current_page_item – which does not have the height or width set. To resolve this, I would just move the background image onto the li.current_page_item CSS.

So the following CSS would work:

.menu li.current_page_item {
    background: url(http://i42.tinypic.com/2mnhvh0.png) no-repeat 0 0 transparent;
}

.menu li {
    ....
    display: inline-block;
    *display: inline;     /* for IE7*/
    *zoom:1;              /* for IE7*/
    line-height: 44px;    /* center text vertically */
    text-align: center;   /* center text horizontally */
    ....
}

Working example: http://jsfiddle.net/9aUaK/2/