Is there a background-width property in CSS?

Question

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?

Solution 1

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.

Solution 2

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.