MVC Bundling and CSS relative URLs

Question

MVC's bundling is returning the wrong URL in CSS images when using CssRewriteUrlTransform:

I have an intranet application whose URL is, for example: http://usid01-srv002/MyApplication. It's in IIS's "Default Web Site".

Which has the following in BundleConfig.cs:

bundles.Add(new StyleBundle("~/bundles/jcss")     .Include("~/Scripts/JQueryUI/css/*.css", new CssRewriteUrlTransform()) ); 

The bundling system is generating the wrong URL for any images referenced in those CSS files, yielding 404's even JQueryUI's very well tested CSS files (from FireBug):

e.g. it's generating

http://usid01/path/foo.png 

When it should be generating:

http://usid01/MyApplication/path/foo.png 

How do I get the bundling system to generate a URL that points to the right location?

Answer 1

CssRewriteUrlTransform updates the CSS Url with absolute path, saying so if we use -

bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css",new CssRewriteUrlTransform())); 

and we have following CSS class in "site.css"

.Sandy {     background-image: url("Images/Sandy.jpg");     border: 1px solid #c8c8c8;     border-radius:4px 4px 4px 4px;     box-shadow: 1px 1px 8px gray;     background-position:left;     background-size:contain;     -moz-background-size:contain;     -webkit-background-size:contain;     -o-background-size:contain;     background-repeat:no-repeat;     min-height:100px;     min-width:100px;     display:block; } 

and following folder structure -

   -Web site Root    -Content    --site.css    --Images    ---Sandy.jpg 

Bundling will generate following CSS Url Path for "background-image" -

 background-image: url("/Content/Images/Sandy.jpg"); 

And now if you hosting the website / web application as a website on web server above path will work, because browser will send request for this resource using following Url because of leading '/'

http://<server>/content/images/sandy.jpg 

but if you host the website as web application this will create problem. Because browser will still interpret this as absolute Url instead of relative and still send following request to fetch this resource -

   http://<server>/content/images/sandy.jpg 

So, the solution for this problem is using the relative Url even in CSS file and then remove the CssRewriteUrlTransform from the Bundle config as below -

background-image: url("Images/Sandy.jpg");  bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));