views:

393

answers:

2

I have a vertical menu using lists (li) and I've got it changing background color on hover.

#limenu:hover {background-color:#000}

However, I don't want the background to fill 100% width. Is there a way of setting the background width or creating a padding on both sides?

+2  A: 

There's no way of setting background width. However, you can simulate this effect in this case by setting a padding and then using overflow to allow your content to overflow the box. The background will still be constrained by the box even if the content is not.

David Pfeffer
+1 Creative solution. I like it.
Andy West
Yeah, me too. ---
Pekka
+1  A: 

There will be a background-size property that does exactly what you want in CSS3. But, it will be a few years until this is so widely implemented that you can develop for it safely.

Until then, bytenik's suggestion (or resizing the background image server-side) is the best that can be done.

Pekka