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 do I resize the border of the body as the window resizes in CSS

    How to animate a div when another div is clicked and how to make the animated div move other elements

    How can you implement a grabbing cursor icon in Chrome?

    How to add a mailto to a sentence without extra spacing?

    How to style PushButton's image size on hover/pressed in Qt4 using CSS

    CSS - How to position a fixed sidebar div relatively to a centered content div

    How to rotate + flip element with CSS

    How can I use CSS to select and style all LI elements that have UL sub-elements? [duplicate]

    How to slow down the last few frames in a CSS sprite animation?

    How to cancel an upstream CSS declaration?

    How to dynamically change css style based on INPUT value?

    How can I override Pseudo Classes in CSS3

    How to make the page layout stay the same after minimized?

    CSS Sprites - How to leave Hover button in depressed state

    How to create border corner spacing in CSS

    How to link another page using button? [closed]

    JavaFX: How not to fill background outside the rounded borders of a Label within a ScrollingPane

    How to indent input controls for a nested HTML list using CSS to a single column

    how can I reload a “CSS background-image” each time I hover on it?

    How to make a toggleable navbar in pure CSS?

    How to apply css mark on videogular time line at specific time

    How to give Internet Explorer different CSS lines?

    How do I require an HTML document (webpage) to be a certain size, or use scroll bars

    How to use css to crop parts of an image

    How to align multiple images horizontally (in a row)?

    How to Apply CSS to element added by Javascript

    how to properly align list items vertically?

    How do I trigger an onclick CSS on a particular ID

    How to add the css properties to an image in ImageResourceCell of CellTable

    How animate stacking divs in javascript/css?