Css background image of link positioning - css

Question

Currently my menu is working with div's as links. Needless to say this isn't good practice. Now I'm changing it to working with link tags but I've stumped upon a problem.
When a link is 'active', eg you're on that page, a background image is applied. This background image is centered to the right, one pixel further than the div so it overlaps a border of the div. Here's the css for the div:
background-image: url('triangle.png');
background-position: center right;
background-repeat: no-repeat;
margin-right:-1px;
z-index:100;
position:relative;
Now, applying this method to a link tag doesn't seem to work. I have got the image to move 1 pixel to the right, but even with a z-index set, the image is under the border. Here's the css for the link:
background:url('triangle.png') no-repeat center right -1px;
z-index:100;
position:relative;
Any thoughts about how come this doesn't work? I've also tried with margin-right:-1px; but this doesn't change anything.
I just noticed that when I set eg -5px in the background css, the rest of the image that should stick out of the border doesn't stick out, it just dissapears.
EDIT: Here's a jsfiddle: http://jsfiddle.net/UkYmJ/
The image isn't transparant but white, so the border should be 'gone' inside the triangle.

Answer 1

As far as I know, there's no such thing as "... center right "AND" -1px;" to the background properties. You either use "right" or a number value. What you can do that could work is using a percentage value higher than 100%, but that would be non precise in some cases, and I think it would not solve your problem.
If you're using, an anchor tag with a background and you want this background to overlap a border to the right, this border needs to be on a parent container and you'll shift your anchor tag (not its background) a -1px to the right (right: -1px; if you're using position: absolute on "a" tag an position: relative; on the parent).
Edit: using this css on your Fiddle, it works for me:
#menu{
width:149px;
border:1px solid red;
}
#menu a{
display:block;
padding:10px;
width:109px;
text-decoration:none;
font-family:Comic Sans MS;
font-size:large;
color:black;
}
#menu a:hover, #menu a.active{
color:#99182c;
}
#menu a.active{
background:url('http://i48.tinypic.com/1p7yg9.png') center right no-repeat;
position: relative;
right: -21px;
}
​Will still try to improve it because it's a bit messy...

Answer 2

I don't think that background: someColor url(something) no-repeat center right -1px; is a valid syntax. background: someColor url(something) center right no-repeat; is.
why do you need to use z-index?
try making your links display as blocks while still on a single line with a {display: inline-block}
edit: you could use calc(100%-1px) but this is only supported by IE9+ Saf6+ and still not Opera: http://caniuse.com/#search=calc (and needs a vendor prefix for some browsers).
Though you can achieve what you want to do with plain CSS2.1 ;)

Answer 3

I believe I have read your question properly.
I think what the problem here is that backgrounds will be clipped at the edge of the element for which it is declared. It won't shift beyond the boundaries of the A element.
You could try to add padding to your A:active to give you a little breathing room.
Your new CSS would be like so:
A:active{
background:url(24d2535.jpeg); no-repeat center right -1px;
z-index:100;
padding-right: 5px;
position:relative;
}
Let me know if that works for you.