What is the right way to insert inline server tags on a page's css section?

Question

I'm trying to put some inline server tags on a page so I can get the right path for an image, using Visual Studio 2012.

I'm doing it like this:

<style type="text/css">
.someclass
{
    background-image: url(<%=Url.Content("~/Content/Images/messageIcon.gif")%>);
}
</style>

The problem is that once this is written, the whole style section loses the color formatting withing the VS2012 editor. Is tyhere a different way to do this (or an option in VS2012), so that I won't lose the colors and the indentation?

Answer 1

The reason that visual studio is losing its formating is that you are mixing css and server-side code as below.

<style type="text/css"> 
.someclass  
{     
    background-image: url(<%=Url.Content("~/Content/Images/messageIcon.gif")%>);
}    
</style> 

You should separate your css from your code.

Image paths are relative to the location of the css file, so css like below is correct, therefore you do not need use a application path worked out by Url.Content(~)

.someclass  
{     
     background-image: url(../Images/messageIcon.gif); 
}