Question

I have a background image that is positioned correctly on the background of a ul li item.

I want to position it just off the edge of the lime container, however when I do position it correctly it cuts off any part of the image not inside the container.

How can I make it show even if it is outside the container, and not cut off like this?

Desired result

CSS

body ul#main_navigation li li:hover > a, body ul#main_navigation li li.over > a
{
     background-image:url(/images/nav_arrow_right.png);
     background-repeat:no-repeat;
     background-position: 197px 12px;
     background-color: #0F0;
     color: #FFF;
}

Answer 1

You cannot have a background-image protrude from any element. You could use a span attached to the element, or attach the background image to the element next to it, giving the illusion that it is part of the original element.

Personally I would use a span with a background image inside the element positioned to sit outside of the div.