How to load images defined in css file in .net mvc application deployed to a virtual server

Question

In my View, I have included the css :

<link rel="stylesheet" type="text/css" href='<%=Url.Content("~/Content/login.css")%>'/>

in login.css, I have

  
#center_left
{
    width:691px; 
    height:190px; 
    background:url(../../images/login_g09.gif); 
    float:left;
}

This works fine when I use VS 2008 to run the application. However, When I deploy the application to a virtual server. All the images disappear. I understand that it's because the relative path is not valid on the virtual server. But I haven't figured out a way to tell the server where the images located. Any ideas?

Answer 1

Your image url(...) just has to be relative to the CSS file itself.

E.g. if your CSS is at ~/Content/login.css and the image is at ~/Content/images/login_g09.gif) you can just do:

background: url(images/login_g09.gif);