CODEWITHSUNDEEP
cssasp.net-mvc-3
TeamWild
TeamWild

Reputation: 2550

Images defined in CSS are not displayed in a deployed MVC3 site

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);
}

Upvotes: 1

Views: 3757

Answers (5)

archil
archil

Reputation: 39491

Seems like issue with deploying your site to virtual directory. Anyways, you should include images relative to css file, not to application. Try

background-image: url(themes/base/images/CustomerLogo.jpg);

Upvotes: 2

jrummell
jrummell

Reputation: 43067

Have you tried a relative path? Assuming your css file resides in ~/Content/themes/base, this should work:

background-image: url(images/CustomerLogo.jpg);

Upvotes: 1

jmacinnes
jmacinnes

Reputation: 1609

Are you sure that the URL is working? If you try to access the URL directly through the address bar, do you see the image?

Upvotes: 0

David Brainer
David Brainer

Reputation: 6331

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.

Upvotes: 2

Rion Williams
Rion Williams

Reputation: 76547

You may need a .. to assist in finding the Content folder,

Example:

background-image: url(../Content/themes/base/images/CustomerLogo.jpg);

Upvotes: 0

Related Questions