How to Keep CSS Background Image on top of all divs(breadcrumb arrows)?

I have built a small breadcrumbs example cloning some functionality from Google's design. I have been looking to get the开发者_Go百科 arrows to display on top of each-other so there isn't any white space. I have tried negative margins, possibly positioning but I wasn't able to get anything working.

Below is a link to Google's working example, along with my current demo example and a screenshot of why the breadcrumbs aren't working currently. Appreciate any help, I'm also happy to clarify anything!

• Google's working example
• Demo(taken offline sorry!)

Current bug screenshot:http://f.cl.ly/items/3H2Z3S3R2v0H3V1r3S3L/breadcrumbs-error.png (sorry this was also deleted!)

The Google implementation is using postion: relative; margin-left: -13px in the CSS but at the same time they are using inline styles to give a different z-index to each link like this: image

Use javascript or your backend script to loop through each link and give each link a lower z-index.

try this:

.crumbs li {
display: inline;
float: left;
margin-right: -11px;
position: relative;
}

so they fit on eacht other. now add this:

.crumbs li:nth-child(1) {
z-index:10;
}
.crumbs li:nth-child(2) {
z-index:9;
} 
.crumbs li:nth-child(3) {
z-index:8;
}

etc

the only problem is, nth-child is css3, so it's bad for your cross browser support. You could also add classes to ever li, like "li.first li.second li.third" etc and give them decreasing z-indexes. Then it should work

Well, Google's use sprites, relative positioning and incremental z-indexes. I think you should go with the same technique. They implement the z-indexes as inline styling with the style="" attribute, which seems acceptable in this situation, especially if they are generated with PHP later on.

Another (somewhat shoddy) way of doing it is to add a wrapper that has the same background image. e.g.

<li>
    <div style="float: left; background-image: url('img/bg-crumbs.png');">
        <a href="#">2011 Writing</a>
    </div>
</li>

for all but the last one.

Add an left: -12px; to the styles of the li elements of the breadcrumb. That would only work if their position is set to relative;

Additionally, for my solution to work, add a PHP or JavaScript for example which add to each element style="z-index: 10;". The script should automatically increase the z-index property. If you are making the blog static etc. with no PHP or JavaScript set the z-index manualy.