Question

when running my mvc website locally (VS IIS) images are displayed correctly:

css snippet:

.sprites {
    background: transparent url(../images/sprites.png) no-repeat 0 0;
}

However, when the site is published to the server OR Local IIS (not VS IIS), images fail to load (giving invalid path)

the only way to display images correctly on the Server is to modify css files and instead of "../images/sprites.png" have "/content/images/sprites.png"

why is that?

Answer 1

I figured it out:

MVC4 comes with \App_Start\BundleConfig.cs file which is used for minimizing css/js scripts.

Whenever I published my website (RELEASE) it was calling \Content\css (minimized file) which contained paths to my images (“../images/etc..”), which was incorrect since css file was no longer WITHIN /Content/Styles/style.css but /Content/css (minimized version).

I had to modify it:

From:

bundles.Add(new StyleBundle("~/Content/css").Include(
                        "~/Content/styles/all.css",
    ..

To:

        bundles.Add(new StyleBundle("~/Content/styles/css").Include(
                "~/Content/styles/all.css",

..

and in my layout.cshtml:

@Styles.Render("~/Content/styles/css")