I have created a server control called BubbleTip.cs . I have also included two related image files, one javascript file and one css file as resource so that people don't need to do any copy & paste work when they use this control. Everything works fine by far, except the CSS background image can't display. The css file is as below:

<bubbleTips.css>

.bubbleTooltip 
{
	width: 200px;	/*fixed width for the balloon*/
	color:#000;		/*text color*/
	font: 12px sans-serif;	/*text size and style*/
	text-decoration:none;	/*other text decoration*/
	text-align:left;		/*text alignment*/
}

.bubbleTooltip span.top 
{
	padding: 30px 8px 0;
	background: url(<%=WebResource("UMControls.Images.bubble.gif")%>) no-repeat top;	
}
.bubbleTooltip span.bottom 
{
	padding:3px 8px 15px;
	color: #000;
	background: url(<%=WebResource("UMControls.Images.bubble.gif")%>) no-repeat bottom;	
}

I'm trying to dynamically refer to one of the included image resource (~\bubble\bubble.gif) in this css file, so I use <%=WebResource("UMControls.Images.bubble.gif")%> to get the URL. However, the background image can't be displayed. The Css file URL in the HTML page shows like this (in firefox):

<link href="/eStudentDev/WebResource.axd?d=dbGd6_KZGGu2Fqfa2grzPdEuPpag7Yryne9moZElvjGShyGIuTpxceJT8P0Lzhko0&amp;t=633934690050934289" rel="stylesheet" runat="server"></link>

When I follow the href link above, it jump to the CSS code that exactly as the original css file. The <%=WebResource("UMControls.Images.bubble.gif")%> part has not been replaced by the correct reference to the bubble.gif image resource.

.bubbleTooltip 
{
	width: 200px;	/*fixed width for the balloon*/
	color:#000;		/*text color*/
	font: 12px sans-serif;	/*text size and style*/
	text-decoration:none;	/*other text decoration*/
	text-align:left;		/*text alignment*/
}

.bubbleTooltip span.top 
{
	padding: 30px 8px 0;
	background: url(<%=WebResource("UMControls.Images.bubble.gif")%>) no-repeat top;	
}
.bubbleTooltip span.bottom 
{
	padding:3px 8px 15px;
	color: #000;
	background: url(<%=WebResource("UMControls.Images.bubble.gif")%>) no-repeat bottom;	
}

My question is how I can make the image URL in the separate CSS resource be converted into the correct resource reference? Or is this possible or not?

Thanks!

Hi,

Is PerformSubstitution set to true? Please refer to this documentation for more details:

http://support.microsoft.com/kb/910442/en-us 

If it still doesn't work please post a demo project that can reproduce this issue. You can upload the project to http://skydrive.live.com/ and paste download link here.

Thanks mate! This does helped me to work it out! I even didn't know there is such a magic thing called  "PerformSubstitution"!

I got another related question. From many examples, I found the javascript (.js) file resource is usually registered with "Page.ClientScript.RegisterClientScriptInclude(...)", however, other files like CSS are not. Is "RegisterClientScriptInclude()" only used to register javascript file? Do I need to register css file use it?

Thanks again!

Hi,

Yes RegisterClientScriptInclude is used to register JavaScript files. 

By Page.ClientScript.GetWebResourceUrl method you can get URL of any resources. Then you can output the URL to HTML where you need.

For instance:

string styleSheet="Get URL by Page.ClientScript.GetWebResourceUrl";
  HtmlHead header = Page.Header;
  HtmlLink link = new HtmlLink();
            link.Href = styleSheet;
            link.Attributes.Add("type", "text/css");
            link.Attributes.Add("rel", "stylesheet");
            header.Controls.Add(link);