While that will work, the shorthand background: is all that's needed if it's just a color. Example full shorthand statement with images:
background: ( #401f00 url(/images/div-bg) top left repeat-x; }
Which will give a background fill of #401f00 wherever the image doesn't cover (and the color will show while the images are loading.)
Where specific background-image really helps:
#nav-images li a { background-color:#401f00; background-position: top left; background-repeat: repeat-x; }
#nav-images li a:hover { background-position: bottom left; }
#home { background-image: url(/images/home.gif); }
#about { background-image: url(/images/about.gif); }
#contact { background-image: url(/images/contact.gif); }
<ul id="nav-images">
<li><a href="/" id="home">Home</a></li>
<li><a href="/about" id="about">About</a></l
<li><a href="/contact" id="contact">Contact</a></li>
</ul>
... or similar . . . the one-liner for image assignment is a real timesaver in debugging.
