apply background images for double tab based page

Summary :
I need help with the css rule to make sure that the background image gets resized properly
when the allowed space is smaller than the actual image size.

Details:
I have a page with double tabs (that is, tabs and sub-tabs). It looks like this .

Its working fine.

Here's the



Here's its CSS code

/* tab styles */

/* Draw line at down tab header */
ul.tabControlHeader {
color: #222;
border-bottom: 2px solid black;
margin: 12px 0px 0px 0px;
padding: 0, 5px;
z-index: 1;
padding-left: 10px }

/* Set tab (li) horizontally */
ul.tabControlHeader li {
display: inline;
overflow: hidden;
list-style-type: none;
color: #DEDECF;
background: #CCCCCC; /*light-gray*/
font: bold 0.7em "Trebuchet MS", Arial, sans-serif;
border: 2px solid black;
padding: 2px 5px 0px 5px;
margin: 2px 2px 0 2px;
text-decoration: none;
}

/* Tab active */
ul.tabControlHeader li.active {
background: #999999;
border-bottom: 3px solid #ABAD85; }

/* A with no text-decoration */
ul.tabControlHeader a {
color: #FF6600;/*light-orange*/
text-decoration: none;
}

.tabControlBody {font: 0.9em/1.1em "bitstream vera sans", verdana, sans-serif;
text-align: justify;
background: #CCFFFF; /*light-green*/
padding: 0px;
border: 2px solid black;
border-top: none;
z-index: 2; }

/* READ-ONLY State */
ul.tabControlHeader li.tabPageHeaderReadOnly {
background: #d4d7a5;
border: 2px solid black;
}

ul.tabControlHeader li.tabPageHeaderReadOnly_active {
background: #d4d7a5;
border-bottom: 3px solid #d4d7a5;
}

div.tabPageBodyReadOnly {
background: #e9ecb4;
opacity:70;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
}

/* FORBIDDEN State */
ul.tabControlHeader li.tabPageHeaderForbidden {
background: #ba2f2f;
}

ul.tabControlHeader li.tabPageHeaderForbidden_active {
background: #ba2f2f;
}

div.tabPageBodyForbidden {
background: #ba2f2f;
}

ul.tabControlHeader li.tabPageHeaderForbidden a {
color: #FFFFFF;
text-decoration: none;
}

I want to apply the following shown tab image as its background image.

so the relevant property change that I do to achieve this is the following

ul.tabControlHeader a { color: #FF6600;/*light-orange*/ text-decoration: none; background:url("../images/tab-selected3.gif") no-repeat left top; }

But my output then looks like this

which is only showing part of the background image.

How can I fix this ??
Shouldn't the image get resized on its own (that is, if the actual size is a little bigger than the space
its being provided etc.)
Any suggestions (or correct css rule snippet) will be most appreciated.
thanks,
robin