Background image cut off outside of item. How can I make it show?


Tags: css,html-lists,background-image

Problem :

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?

enter image description here

Desired result

enter image description here

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;
}


Solution :

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.


    CSS Howto..

    How to prevent table row from re-sizing when hidden text is displayed?

    How to achieve this CSS layout - Answered [closed]

    How to stop jQuery-ui from adding classes to my button

    How to add next / previous buttons to Surface tablet touch-slideshow?

    How to make a transition effect that just perform like css transition?

    How do I place text to the right of a relatively positioned image?

    How to create cascading menus in rails?

    How to make blur effect without white light?

    How to capture hover events on css (less) box-shadow

    How to separate content and presentation layers on JSPs?

    how to override the ice:commandLink css

    How to fill a transparent image with a progress bar ? #CSS #HTML #Jquery?

    How to prevent transition to run on page load after height is set with javascript in Safari?

    How do I align this CSS correctly?

    how to align right hand side image on top of text on mobile screen

    how to make “before” li is fixed at the bottom of li?

    How to use CSS to create a matrix of cells, and not use HTML tags at all

    How to keep indent in lists with CSS?

    How do I uncollapse a margin?

    how can I access a css class from the appended html div?

    How to make a background using CSS gradient with flat color?

    Chrome Developer Tools: How to find out what is overriding a CSS rule?

    How are CSS properties implemented by different browsers? [closed]

    How to control spaces/margin between bars?

    How to check if the current page is a plugin admin panel in wordpress

    How to restrict pasting text in an input text field in html

    how to add a permanent line on top of ios7 in phonegap

    How to change style for before/after in Angular?

    How can I place a checkbox within a button? [closed]

    How to show borders of th elements with gradient fills in IE9?