referencing images in app_themes/images folder after combining css scripts ...

Question

Hi, I wanted to combine app_themes css files into one on the fly. I did so using Mads Cristensen technique. But now all elements that has background image defined through css (see picture) don't display image. . I believe that is because css files are not relatively referenced anymore (../), but through axd file. I'm trying to fix this by changing reference to image files without success. I already tried background: url("~/App_Themes/44/images/myimage.gif") and this works for pages that combined css. But the problem is that there are other pages in this project that don't use this css combining and now they lost reference to background images. Any ideas?

Answer 1

I think that the ApplicationPath might be causing some confusion in this case...

Using a logical path (relative to the web-server's root) in the *.css file will work irrespective of whether it's rendered natively from the App_Themes folder or through an *.axd handler.

Take this example, for instance:

body 
{
    background-image:url('/WebSite1/App_Themes/Theme1/Image/Logo3.png');
}

This will resolve correctly whether it's rendered through an *.axd handler at the root (or at any depth below the root) and it will resolve if it's rendered at /WebSite1/App_Themes/Theme1/StyleSheet.css.

ASP.NET specific paths beginning with ~ (so-called root relative paths) have no force in *.css files and need to first be resolved to a a logical path using ResolveUrl().

(1) - http://www.west-wind.com/weblog/posts/132081.aspx