Is it possible to add a background image in an unordered list? I have this:
#menu ul li ul {
background-image:url('../images/menu_border_has_child.png');
background-repeat:no-repeat;
background-position:top right;
}
In firebug it shows the image is loaded, also I know I am applying the style to the correct ul because while in firebug if I add a border in that same rule the border is showed in the page but the image does not appear.
This is weird, if I add overflow hidden then the background displays
That probably means that your list items are floated and floated elements are removed from the flow. If a parent contains only floated elements then its height collapses to zero as if the elements weren’t there and thus no background will show.
Overflow:hidden creates a new block formatting context and a side effect of which is to contain child floats. The drawback is that if you want visible overflow then you need another clearing mechanism instead Read the css faq on floats for more info.