Customizing Image caption background

I want to add a ribbon image I made to the bottom of the small “featured” images that appear on my homepage. I’m not an expert, but generally I can stumble upon a solution. This time I’m stuck.

This is my homepage: https://bitsybride.com

and this is what I’m going for: https://bitsybride.com/Image8.png

I’m pretty sure I need to put it somewhere in here in my CSS file. I am using the “smallpost” option:

/* indexpost - types
********************************************************************************************
********************************************************************************************/

.smallpost .date,
.bigpost .date,
.post .date{
overflow:hidden;
position:absolute;
padding:7px;
line-height:1;
top:0;
left:0;
}

.smallpost .more,
.bigpost .more{
overflow:hidden;
position:absolute;
padding:0;
line-height:1;
right:0;
bottom:0;
width:32px;
height:30px;
}

.more a{
position:absolute;
right:0;
bottom:0;
padding:7px 8px;
line-height:1;
width:15px;
height:15px;
}

ul.bigpost li {
width:600px;
margin:0 40px 40px 0;
padding:20px 20px 30px 20px;
position:relative;
float:left; }

	ul.bigpost li a img {
	margin:-20px 0 15px -20px;
	width:640px;
	height:auto;
	overflow:hidden;}

	ul.bigpost li iframe{
	margin:-20px -20px 15px -20px;
	width: 640px;}

.smallpost {
	overflow:hidden;
	width:730px;
	padding-bottom:0;
}

ul.smallpost li {
	width:280px;
	height:150px;
	margin:0 40px 60px 0;
	padding:0px 0px 0px 0px;
	position:relative;
	float:left;
	background:transparent
}

ul.smallpost h2 {
	font-size: 12pt;
	line-height: 0pt;
	margin: 0 0 0px 0;
	padding:10px 0px 0px 0px;
	letter-spacing: -1px;
} 

ul.smallpost li img {
	margin:-20px 0 15px -20px;
	width:280px;
	height:150px;
	overflow:hidden;
padding: 4px;
	margin: 1px 1px 4px 1px;
	overflow: hidden;
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); /*-moz-border-radius: 5px;-khtml-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;*/
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	-o-linear-gradient(#2F2727, #1a82f7);
	background:
	-moz-linear-gradient(center top , #FFFFFF, #EFEFEF) repeat scroll 0 0 transparent
	;
	background: -webkit-gradient(linear, left top, left bottom,
	from(#fff),
	color-stop(0.5, #fff),
	to(#EFEFEF)
	);
	filter: progid: DXImageTransform.Microsoft.Gradient(StartColorStr='#ffffffff', EndColorStr='#EFEFEFEF');
	-ms-filter: \"progid: DXImageTransform.Microsoft.gradient(startColorstr=#ffffffff, endColorstr=#EFEFEFEF)";
	-o-linear-gradient(top, #dcdcdc, #c6c6c6);
	border: 1px solid #FFFFFF;
	z-index: 5;
}