CSS background images in MVC3

Question

I am trying to create style sheet for my MVC3 app. I'm not sure how to format the background-image:url.

background-image:url('../../Content/images/gradient_tile_page_top.png');

or

background-image:url('~/Content/images/gradient_tile_page_top.png');

I've tried both and neither work. Css seems to be a little trickier with MVC.

Answer 1

If you're following the "norm" your main page layout will have something like:

<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />

and your other assets (images for example) will either reside directly in the content folder or in an "images" folder under content.

Therefore, in your example:

background-image:url('../../Content/images/gradient_tile_page_top.png');

becomes

background-image:url('images/gradient_tile_page_top.png');