CSS and images on Master Page

Question

I have this quite popular problem, but have failed to find a solution that works.

Basicly, I am using a Master Page (/Masterpages/Default.master), that includes

<link href="../css/style.css" rel="stylesheet" type="text/css />

And it also includes some images with the same relative linking.

But when I apply the Master Page to content pages (in diffrent folderlevels) the css formating and images is lost.

Is there anyway to dynamicaly solve the folderlevel links to css and images to all content pages using the masterpage?

Thanks in advance

UPDATE:

There is an additional problem. It's tricky to get the output to render correctly in both the browser and in design view in Visual Studio.

I got it to work by using the asp:image solution for the images in the masterpage and by double linking the css in the masterpage, one to make it render in VS and one to make it render correctly browsing the site.

<link href="../css/style.css" rel="stylesheet" type="text/css" />
<link href="<%=ResolveUrl("~/css/style.css")%>" rel="stylesheet" type="text/css" />

Answer 1

best to use:

<link href="<%=ResolveUrl("~/css/style.css") %>" rel="stylesheet" type="text/css />

since this will cope with iis application roots unlike:

<link href="/css/style.css" rel="stylesheet" type="text/css />

Answer 2

You can make your link runat="server" and use tilde mapping to make the CSS path relative to the site root.

<link runat="server" id="siteStyle"
      href="~/css/style.css"
      rel="stylesheet"
      type="text/css" />

The images referenced in the CSS should be relative to the location of the CSS file and should resolve normally once the CSS file itself is included properly. For images in tags on the page, you would need to use the ASP:Image control and, again, use the tilde mapping for a path relative to the root.