How can I overlay an image for the widget titles?

Hi, just wondering if it is possible to overlay and image with the widget titles.

Something like what's done in this site: http://gauteweb.net/

Many thanks!

I currently have this CSS in Add CSS

.widget ul li a:link,
.widget ul li a:visited,
.widget ul li a:active,
.widget ul li a:hover {
border-left: 0 !important;
padding-left: 0 !important;
}

.widget ul {
list-style-type: none !important;
padding-left: 0;
margin-left: 0;
}

.widget ul li {
/* Background image instead of "list-style-type: image" because positioning is
more precise and cross-browser safe. "0 3px" means 0px to the right, 3px to the bottom,
starting in the top left corner of the <LI> element. These numbers would be different with
a different image and/or different text size. */
background: url(/wp-content/themes/atahualpa332/images/icons/add-gray.gif) no-repeat 0 3px;

/* [width of image = 12px] + [desired distance between icon and link text = 6px] = 18px */
padding-left: 18px;

/* indent the icons a bit from the left */
margin-left: 2px;

/* Overwrite the still active "display:block" for Firefox.
This is usually not required, but required in Atahualpa */
display: list-item;
}

/* OPTIONAL */
.widget ul li ul li {
/* Adjust the indention of 2nd level items. Without this, the indention of 2nd level
items will be: [padding-left of 1st level LI = 18px] + [margin-left of 1st level LI = 2px].
We reduce this rather huge left indention by setting a negative left margin. The image
being used here is a tad too big for a bullet, the 18px padding-left is causing the sub
items to be indented relatively far. With a smaller bullet image, and smaller padding-left,
we could probably drop this last style altogether, the 2nd level indention would look o.k. */
margin-left: -5px;
}

div.widget-title h3 {
background: url(/wp-content/themes/atahualpa/images/sidebar/sidebar widget.jpg) center left;
}