Dynamically change the background image

[Jason Sperko]

I have a RadTabStrip and I am adding the RadTabs dynamically.  As I am creating these RadTabs, one of the properties I would like to set is a background image.  Is it possible to do this? 

I have tried creating multiple TabStripStates.png files ( a default, then a TabStripStates_Red.png).  My thinking was that as I create these new tabs, I could just set the tab.CSSClass to a css that I have defined that points to this file :  

For example :  In my code behind as I create the tab :  tab.CSSClass = "red";

In the css that I have defined : 

.tabstrip .red .rtsLink,
.tabstrip .red .rtsOut { background-image: url('TabStrip/TabStripStates_Red.png'); }

What I am not understanding is if I am just missing something, or if this is not the correct way to do this.  Any help on dynamically setting the background image would be greatly appreciated.

Thank you

 

 

 

 

 

[Jason Sperko]

I have resolved this in a different manner.

Instead of creating new TabStripStates for each color, I simply created a gradient backround image that would suffice.  I then created a css that would handle each color and each mode such as follows : 

<telerik:RadTab id="temp1" CssClass="blue" Height="20px" SelectedCssClass="blue_selected" HoveredCssClass="blue_hovered" runat="server" Text="1971 Hemi Cuda"></telerik:RadTab>

div.RadTabStrip .blue
{
    background: transparent url(Blue.png) repeat-x 0 0 !important;
    border-left:solid 1px gray; 
    border-right:solid 1px gray;
    border-top: solid 1px gray; 
    border-bottom-style:none;
    padding: 0px 0px 0px 0px;
}

div.RadTabStrip .blue_selected
{
    background: transparent url(blue_selected.png) repeat-x 0 0 !important; 
    border-left:solid 1px darkgray; 
    border-right:solid 1px darkgray; 
    border-top: solid 2px darkgray;
    border-bottom-style:none; 
    padding: 0px 0px 0px 0px;
}

div.RadTabStrip .blue_hovered
{
    background:transparent url(blue_hover.png) repeat-x 0 0 !important; 
    border-left:solid 1px darkgray; 
    border-right:solid 1px darkgray; 
    border-top: solid 2px darkgray; 
    border-bottom-style:none;
    padding: 0px 0px 0px 0px; 
}

Obviously the css can be cleaned up, but I wanted to get it working first and was messing with different looks.