(Urgent Help Needed) Aligning and Positioning

Hey guys, I'm trying to resize the image slider you see below to look more like the second image. I have been playing with the CSS but Wordpress is not taking the changes I'm applying. I have modified the CSS to what you see below and was wondering if there was something wrong with it?

	#home_slider{
		background:url(images/shadow_900.png) no-repeat 50% bottom;
		margin:0 0 18px; padding:0 0 12px 0;
		position:relative;
		width:598px; height:300px;
	}
	
	.featured_banner{
		background:url(images/featured_banner.png) no-repeat left top;
		position:absolute;
		top:-3px;
		left:473px;
		z-index:500;
		width:121px; 
		height:122px;
	}
	#slider{
		position:relative;
		width:598px; 
		height:300px;
		display:block;
		clear:both;
	}
	#slider #slider_img{width:930px; display:block; float:left; overflow:hidden; height:300px; }
	#slider #slider_img span{
		background:#000;
		display:block;
		position:absolute;
		bottom:0;
		left:0;
		width:598px;
		padding:10px;
		text-transform:uppercase;
		letter-spacing:1px;
	}
	#slider #myController{display:none;}
	#slider img {}
	#slider a{ display:block;}
	#slider .jFlowPrev, #slider .jFlowNext{
		display:none;
	}

Code (markup):

I also want to add a background image like in the second image, since my knowledge is limited I was hoping maybe someone can direct me with where I should add the code for the background. Thanks

From this (image 1)



To this (image 2)

 

Show the mark up as well or Post a live url.

 

What you want is a customization that can not be done in 5 minutes, we must see the plugins code/javascript and also the complete CSS of the site/plugin.