Question

I have created a basic MVC3 site and have added image paths into the site.css file (part of the original template).

When I run the application through dev studio the site looks OK and the images are displayed.

When I build my installer and deploy the site onto my server the images aren’t displayed.

Here is a sample of my css file:

#CustomerLogo
{
    position: relative;
    margin-left:auto;
    margin-right: auto;
    width: 300px;
    height: 96px;
    background-image: url(/Content/themes/base/images/CustomerLogo.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-color: rgb(41,139,178);
}

Answer 1

Besides ensuring that the images are actually loaded on the server, you may want to check whether the application on the server is actually running at the root directory /. For example, if your site is located at facebook.com/myGreatApp by prefixing your url with / you are telling the browser to look for images at facebook.com/Content/… which is the root rather than at facebook.com/myGreatApp/Content/…

As some other posters have mentioned, the fix for this would be to determine what the actual path from your css to those images is and to use that. A relative path would serve this perfectly and which relative option to use depends on where the css is located in relationship to the images.