CSS Background-Image refuses to display in ASP.Net MVC

Question

I am having trouble displaying an background image in my ASP.NET MVC 2 application. Currently, In ~/Views/Shared/Site.master, I set my link to the style sheet to:

Answer 1

In my case I had to back out to the root and include a path to the Content directory.

So even if my directory structure looked like:

-Content
--css
---site.css
--img
---someImg.png

I couldn't do

background-image: url(../img/someImg.png)

I had to do:

background-image: url(../../Content/img/someImg.png)

This worked locally in debug mode (no minification) and deployed to AWS (with minification) correctly.

Also, don't forget if you're using Bundle minification and you use @import in your CSS to still include the asset in the bundle. For example:

main.css
@import url(../../Content/css/some.css)

Be sure to include some.css in your bundle:

 bundles.Add(new StyleBundle("~/Content/global").Include(
                 "~/Content/css/some.css",
                 "~/Content/css/main.css"));

No need to do this if you're using LESS or SASS bundlers as the handler knows how to find the files and include them (that's the point!); however, if you're doing it as a straight CSS import, the bundler won't know to include it when it minifies.

Hope this helps someone!