5

I have an MVC4 project which has the following structure:

/Content/css/sprites/topbar.css

/Content/images/topbar.png

In the css file I am trying to reference the image by using:

background: url('../../images/topbar.png')

But the image is not displayed. If I change it so that the image is located in:

/Content/css/sprites/topbar.png

And change the css to be:

background: url('content/css/sprites/topbar.png')

it works, but this breaks my project structure.

Any ideas?

EDIT

I didn't mention something else as I didn't think it was relevant, however it appears to affect this!

I use @System.Web.Optimization.Styles.Render("~/MainStyles") to bundle and minify the css, but if I take that step out, then it works as I would expect. How would I get it all to work with my project structure and using the bundling?

Community
  • 1
  • 1
eyeballpaul
  • 1,725
  • 2
  • 25
  • 39

4 Answers4

8

Don't know if anyone else was having this problem. But you CAN use relative paths in your css. The key is registering the bundle with a virtual path to the same folder where your actuall css will reside. This way MVC Will request the bundled css from a handler in that path.

Try changing your bundle registration to:

bundles.Add(new StyleBundle("~/Content/css/sprites/topbar")
              .Include("~/Content/css/sprites/topbar.css")
            );

Then in your view @Script.Render("/Content/css/sprites/topbar")

Mvc will request your complied css bundle from /Content/css/sprites/topbar?{some-crazy-token-thing}

tfx_wse2012
  • 81
  • 1
  • 1
5

I found out what the issue was.

It was indeed the bundling and minification used in MVC. When the css was looking for images, it was looking in the folder that my bundle was pointing to as the current folder, rather than the folder the css file is located in.

eyeballpaul
  • 1,725
  • 2
  • 25
  • 39
  • Thanks for posting, I was having the same issue after changing my project file structure and couldn't figure what was the problem. You post helped me a great deal! thanks – Benoit Letourneau Nov 27 '14 at 06:40
3

Try using:

.social ul li a.blog { background: url(@Url.Content("~/Content/img/houseIcon.png")) no-repeat left top; }

For using razor in CSS, see this http://www.codeproject.com/Articles/171695/Dynamic-CSS-using-Razor-Engine

user1477388
  • 20,790
  • 32
  • 144
  • 264
  • 1
    That won't work in pure CSS files. The OP might want to look at various CSS handlers for ASP.NET that extend the CSS syntax with macros and support for app-relative paths. – Dai Sep 10 '12 at 12:25
  • Thanks, I didn't know that. I've updated my answer with a way to declare variables in CSS files using Razor syntax. That may work. – user1477388 Sep 10 '12 at 12:30
  • I didn't think I could use razor in a css file? – eyeballpaul Sep 10 '12 at 12:46
  • Me neither, then I did a google search and found that page. Try it and let us know if you found it useful. I will also have to do something like this in my project. I currently use inline styles, but I will put them in external files and then probably compress them into one file. – user1477388 Sep 10 '12 at 12:47
  • You hit on something there, I forgot that I used bundling/minification which seems to also have affected it, I have updated the question – eyeballpaul Sep 10 '12 at 13:06
  • I did another google and found this http://stackoverflow.com/questions/9780099/asp-net-mvc-4-minification-background-images. Maybe you can try it. – user1477388 Sep 10 '12 at 13:11
  • Also, I read System.Web.. is obsolete. Please use and read this, instead http://stackoverflow.com/questions/9475893/how-to-add-reference-to-system-web-optimization-for-mvc-3-converted-to-4-app – user1477388 Sep 10 '12 at 13:16
  • Thanks for the links, however I just posted up the issue/answer, it was to do with the bundling, and what it thought the current folder was! – eyeballpaul Sep 10 '12 at 13:19
  • Don't forget to upvote helpful comments and close the question or accept an answer. Good luck with your app. – user1477388 Sep 10 '12 at 13:24
1

I recommend storing CSS-referenced images in the same folder as, or a subfolder of the directory holding the CSS file itself, so you can use minimally-long relative paths in your CSS file.

If your application always resides in the root of the website, you could use root-relative paths (e.g background-image: url("/content/images/toopbar.jpg"); )

Hmm, but then "../images/topbar.png" should also work. Have you tried that?

Dai
  • 141,631
  • 28
  • 261
  • 374
  • My application will not always be the root website, it could be a web application within the site. It is jsut strange that using '../../images/topbar.png' did not work regardless of the url being long – eyeballpaul Sep 10 '12 at 12:43
  • I have updated question as I forgot I used bundling/minification – eyeballpaul Sep 10 '12 at 13:06