Background-image pseudo z-index

Question

I have a <ul> with several background images. The problem is that <li> has a border-bottom that extends beyond a single background image (in this case, an arrow). I would like the arrow to be a UP layer on the border. You can see the overlap here:

And here is the JsFiddle that reproduces the <ul> . Here is a live site.

I know that it is not possible to set the z-index for background images, but is there a trick (or, better, a clean way to avoid this overlap and set the lower lower layer below or the background image of the layer above)?

EDIT: Setting up .box ul li {position: relative;z-index: -1} makes the arrow above border-bottom , but links are no longer available for calling: DEMO : (

Answer 1

Below may be an option.

For HTML:

 <div style="list-style-type:none;width:400px" class="box"> <ul id="lastfm"> <li>...</li> ... <li class="overlay"></li> </ul> </div> 

Add an additional li.overlay element and attach a background image to it using CSS:

 .box ul#lastfm { padding-right: 75px; position: relative; /* So that the absolute positioning based on this block... */ margin-left: 0; list-style: square outside none; } .overlay { outline: 1px dashed blue; /* for demo only */ position: absolute; z-index: 1; /* to make sure it is in front of list items... */ bottom: 0; right: 0; height: 70px; /* will depend on your images... */ width: 110px; background-attachment: scroll, scroll; background-clip: border-box, border-box; background-color: transparent; background-image: ... background-origin: padding-box, padding-box; background-position: right bottom, right bottom, left 0px; /* Make sure syntax is correct, otherwise Safari gets confused... */ background-repeat: no-repeat, no-repeat; background-size: auto auto, 70px auto, auto auto; } 

Make sure the syntax for background-position absolutely correct, otherwise Safari will not be able to figure it out. Firefox was a little more forgiving.

The demo is located at: http://jsfiddle.net/audetwebdesign/GpAek/