CODEWITHSUNDEEP
cssimagebackgroundhtml-lists
Francesca
Francesca

Reputation: 28128

Position a background image off the edge of a ul/li item

I have a background image that I'd like to position just off the edge of my ul li item.

Image

Arrow on UL LI item

I guess you can see what I'm trying to do, position that little right pointing arrow off the egde, similar to the one at the top that points downwards. (The lime will be changed for the same colour as the arrow, but at the mo I have put a contrasting colour so the arrow can actually be seen)

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:center right;
     background-color: #0F0;
     color: #FFF;
}

Desired result

enter image description here

EDIT: I have managed to get the arrow positioned correctly, however it is cutting off... how can I make it not cut off anything that is outside of the item?

Upvotes: 0

Views: 4154

Answers (1)

Shailender Arora
Shailender Arora

Reputation: 7778

@Francesca so you can play with positioning you can set the background-positionwhere do you want the arrow image that will go there............

I am giving you some rough idea below i don't have your much code....

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:center 10px;
     background-color: #0F0;
     color: #FFF;
}

Upvotes: 1

Related Questions