Background image cut off from the element. How can I make it appear?
source link: https://www.codesd.com/item/background-image-cut-off-from-the-element-how-can-i-make-it-appear.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Background image cut off from the element. How can I make it appear?
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;
}
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.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK