Display image using CSS in MVC 2

Question

In MVC 2 I'm trying to display a image On my master page using CSS.

.menu .symbol-item  { background-image:url(Content/icons/page.png); }

The image is displaying when the URL is like

http://localhost:4745/Item

but it does not display when the URL is like

 http://localhost:4745/Item/Create

Both the pages use the same master page

Use an absolute path: .menu .symbol-item { background-image:url(/Content/icons/page.png); } — Kao
– Kao, Commented May 2, 2013 at 10:09

Mathew Thompson · Accepted Answer · 2013-05-02 08:26:12Z

1

You need to use Url.Content in order to make sure your URL will resolve to the same place every time. To do this, that CSS needs to live in your view. First move it to your view, then do:

.menu .symbol-item  { background-image:url(@Url.Content("~/Content/icons/page.png"); }

answered May 2, 2013 at 8:26

Mathew Thompson

56.5k15 gold badges131 silver badges151 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

chamara Over a year ago

did not work. I used .menu .symbol-item { background-image:url(<%: Url.Content("~/Content/icons/page.png")%>); } but still the same result

Mathew Thompson Over a year ago

@chamara what was the URL for the image in the browser? Check dev tools.

Collectives™ on Stack Overflow

Display image using CSS in MVC 2

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related