Problem with opacity

Hey all,

First of all, here's what I'm trying to do :


Here's what I've done so far :

.menuTitle {
	background:#A0410A;
	font:bold 15px "Times New Roman", Times, serif;
	color:white;
	line-height:18px;
	padding-left: 5px;
}

.menuCorner {
	background-color: #669933;	
	margin:0 0 0 0;
	width:25px;
	height:18px;
	float:right;
}

.menuColor {
        width:161px;
        background-color: #669933;
}

.menuImage {
	background: transparent url("test.jpg") no-repeat bottom left;
	background-size: 161px;
	filter:alpha(opacity=40);
	-moz-opacity:.40;
	opacity:.40;
}

<div class="menuColor">
	<div class="menuTitle"><span class="menuCorner"></span>Title</div>
	<div class="menuImage">
		<ul>
			<li><a href="#">Link 1</a></li>
			<li><a href="#">Link 2</a></li>
			<li><a href="#">Link 3</a></li>
		</ul>
	</div>
</div>

Code (markup):

Any idea on how to do the opacity area like the image?

Thanks !

 

I know it would be easier The thing is that the image can be changed using a Web content management system. That's why I can't do it like that.