Question

I am using MVC 3.0 and my images work fine when I run from Visual Studio IDE. But when I publish to a file system, my images are not being displayed. Here is the snippet of code that doesnt work when published, but otherwise works fine.

.red_plus {float:left;padding-left:18px;color:#D82A26;background:url('/img/gll-red-plus.gif') 0 50% no-repeat;cursor:pointer;}



<span id="toggle_rates_summary" class="red_plus" onclick="SomeFunctionName('SomeParam'); return false">View Something</span>

Can anyone tell me what is going on?? Below is the folder structure of my project.

WebProjectName
-Content
-css
-main.css
-Image
-gll-red-plus.gif

Answer 1

Image urls that you set in your CSS files should be relative to the location of the CSS file. So for example if you have the following folder structure:

|- Styles - main.css
|- img - gll-red-plus.gif
|- Views - ...
|- Content - ...

inside your main.css:

.red_plus {
    float:left;
    padding-left:18px; 
    color:#D82A26;
    background:url('../img/gll-red-plus.gif') 0 50% no-repeat;
    cursor:pointer;
}