Hey everyone,

I have no idea what search query would be successful, so if this has been asked before, I apologize. I'm trying to get a partially transparent background around a flexible container. I'm having trouble accessing my webspace, so I can only provide screen shots. This is what I want it to look like.

http://i.imgur.com/jHT1h.png

The entire area would be clickable and look like this. However, the only way I can do it is with two png backgrounds. If I have the entire area clickable, they overlap like so:

http://i.imgur.com/iDERH.png

And if I make the left margin wide enough to fit in the 12px wide left image, then the left part of the <li> can be hovered over independently, like this:

http://i.imgur.com/jFxgD.png

Here is the code I have relevant for this section of the site:

Code:
<body>
	<div id="topbar">
		<div id="header">
			<ul id="menu">
				<li><a href="#">Upcoming Events</a></li>
				<li><a href="#">Shows</a></li>
				<li><a href="#">Get Involved</a></li>
			</ul>
		</div>
	</div>
</body>
And the CSS

Code:
#menu {
	margin:4px 0 0 0;
	float:left;
}

#menu li {
	height:50px;
	margin:0 20px 0 0;
	float:left;
	list-style:none;
}
	#menu li:hover { background:url('../images/site/menu-hover-left.png') no-repeat left top; }

#menu li a {
	height:50px;
	padding:0 30px 0 15px;
	background:url('../images/site/menu-carrot.png') no-repeat;
	background-position:right center;
	color:#fff;
	display:block;
	font-family:News-Gothic, Georgia;
	line-height:50px;
	text-decoration:none;
	text-transform:uppercase;
	-moz-text-shadow:2px 2px 2px #000;
	-webkit-text-shadow:2px 2px 2px #000;
	text-shadow:2px 2px 2px #000;
}

#menu li a:hover {
	text-decoration:underline;
	background:url('../images/site/menu-hover-right.png') no-repeat right top;
}
Anyone have any ideas? Thanks in advance!