Question

Basically I’m trying to simulate Photoshop’s image overlay thing using images and CSS for a menu.

There are 2 versions of the menu background image: one is the normal state (pink), and one the active state (blue). The entire menu is wrapped in a DIV with the normal (pink) image as background.

How can I make it so each active menu link uses the corresponding slice of the blue image?

Like this:

My code so far

Do you think this is possible with CSS?

Answer 1

If you need to support older browsers and can’t use css3, there is a number of ways to do this. One of them:

You can cut out the blue image of the entire thing (you can actually make it wider)

then

li.active {
    background: url('path/to/yourImage.png') no-repeat -50px 0;
    /* 50px or however wide that rounded tip is */
}

li.active.first {
    background-position: left top;
}

li.active.last {
    background-position: right top;
}
/* you'll need to add 'active', 'first' and 'last' classes accordingly. */